Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You could achieve this by 'listening' about what is pressed on the window, and then detecting the particular letter/string pressed, search through items list and if you find it change its css properties or add a new 'selected' class i.e. (demo => <a href="http://jsfiddle.net/steweb/mC6tn/" rel="nofollow">http://jsfiddle.net/steweb/mC6tn/</a> ..try pressing whatever :) and <strong>added</strong> after something found press left or right btns, or enter) : </p> <p><strong>JS</strong>: (supposing that each element you want to find something into and select it has class 'elem')</p> <pre><code>var whatYouAreSearching = $('&lt;div class="searching-string"&gt;&lt;/div&gt;'); //just to see what string you're typing $(document.body).append(whatYouAreSearching); function search(what){ what = what.toLowerCase(); $('.elem').removeClass('selected'); //reset everything $.each($('.elem'),function(index,el){ if($(el).html().toLowerCase().indexOf(what) &gt; -1){ $(el).addClass('selected'); return false; //found, 'break' the each loop } }); } var letterPressed = []; var timeOutResetLetters = null; $(window).keypress(function(e) { clearTimeout(timeOutResetLetters); //clear timeout, important! timeOutResetLetters = setTimeout(function(){ //if 500 ms of inactivity, reset array of letters pressed and searching string letterPressed = []; whatYouAreSearching.html(''); },500); letterPressed.push(String.fromCharCode(e.keyCode)); //look at the comment, thanks Niclas Sahlin whatYouAreSearching.html(letterPressed.join('')); //show string search(letterPressed.join('')); //and search string by 'joining' characters array }); </code></pre> <p><strong>EDIT</strong> added left/right/enter keys handling</p> <pre><code>$(window).keydown(function(e){ //left right handling var currSelected = $('.elem.selected'); if(e.keyCode == "37"){ //left, select prev if(currSelected.prev() &amp;&amp; currSelected.prev().hasClass('elem')){ currSelected.prev().addClass('selected'); currSelected.removeClass('selected'); } }else if(e.keyCode == "39"){ //right, select next if(currSelected.next() &amp;&amp; currSelected.next().hasClass('elem')){ currSelected.next().addClass('selected'); currSelected.removeClass('selected'); } }else if(e.keyCode == "13"){ //enter $('.entered').remove(); $(document.body).append(currSelected.clone().addClass('entered')); } }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POCapture keypress to filter elements
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USstecb
    1. USstecb
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POCapture keypress to filter elements
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COYou could use String.fromCharCode(e.keyCode) if you want to catch them all without having one if statement for each.
      singulars
      1. PO
      1. USNiclas Sahlin
    2. COWow.. thanks! I didn't know about it :)
      singulars
      1. PO
      1. USstecb
    3. COGood solution! also I'd suggest to handle `BackSpace` key! When writing some word and making a mistake many people (including me) automatically press backspace to correct the typo, even if there is no visible <input>. In this case browser goes to the previous page :)
      singulars
      1. PO
      1. USHrant Khachatrian
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload