矢印キーを使用しない自動提案ドロップダウン

Question

ユーザーが検索入力に何かを入力するたびに動作する、私のウェブサイトにはかなり基本的な自動提案機能があります。

グーグルズ検索の自動提案のように機能すると思われます。しかし、いくつかの提案が返された場合、ユーザがキーボードの矢印の1つを押すと、それは何の提案も選択されません。ここで

は（提案の選択のための）私のJSです：ここでは

$(document).ready(function(){ 
    var $result = $('li'); 

    $('input').keydown(function(e){ 
     var key = e.keyCode, $selected = $result.filter('.selected'), $current; 
     if(key != 40 && key != 38){ 
      return; 
     } 
     $result.removeClass('selected'); 
     if (key == 40){ 
      if (!$selected.length || $selected.is(':last-child')){ 
       $current = $result.eq(0); 
      } else { 
       $current = $selected.next(); 
      } 
     } else if (key == 38){ 
      if (!$selected.length || $selected.is(':first-child')){ 
       $current = $result.last(); 
      } else { 
       $current = $selected.prev(); 
      } 
     } 

     $current.addClass('selected'); 
    }); 
}); 

は私のAjaxです：

function findmatch(){ 
    if(window.XMLHttpRequest){ 
     xmlhttp = new XMLHttpRequest(); 
    } else { 
     xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); 
    } 

    xmlhttp.onreadystatechange = function(){ 
     if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
      document.getElementById('s-dif').innerHTML = xmlhttp.responseText; 
     } 
    } 

    var qVal = document.getElementById('query-value'); 

    xmlhttp.open('GET', 'search/suggest.php?q=' + qVal.value, true); 
    xmlhttp.send(); 
} 

非常に基本的なHTML：

<div class="form-container"> 
    <form method="get" id="search" name="search"> 
     <input type="text" name="q" id="query-value" onkeyup="findmatch();" placeholder="Search with Ajax..."> 
    </form> 
</div> 
<div class="suggestions"> 
    <ul id="s-dif"> 
    </ul> 
</div> 

私は、問題は私の「選択のjQuery」内にあるかのように、しかし、私は トリプルチェックすべてに確認しましたが、私は見つけることができないように感じる

if(isset($_GET['q'])){ 
    $results = ''; 

    $query = trim($_GET['q']); 
    if(!empty($query)){ 
     $stmt = $conn->prepare("SELECT title, popularity FROM autosuggest WHERE keywords LIKE :query OR title LIKE :query ORDER BY popularity desc LIMIT 7"); 
     $query = $query . '%'; 
     $stmt->bindParam(':query', $query); 
     $stmt->execute(); 

     $count = $stmt->rowCount(); 
     $i = 0; 
     if($count > 0){ 
      while($row = $stmt->fetch(PDO::FETCH_OBJ)){ 
       $title = $row->title; 
       $popularity = $row->popularity; 

       $i++; 

       $results .= '<li id="select-suggest" value="' . $i . '" name="' . $title . '">' . $title . '</li>'; 
      } 
     } 
    } 
} 

print("$results"); 

：

、そして最後に、私のPHP機能が動作しなくなるようなもの。

Answer 1

Googleの仕組みがわかりませんが、私はあなたが以下のスクリプトのようなことをしようとしていると信じています。あなたは返されたドロップダウンメニューにそれを適用できるはずです。カーソルが入力フィールドにフォーカスされていることを確認します。

jsFiddle：https://jsfiddle.net/2wvs0tmd/

はJavaScript：

// I am going to use an object, just for reuse 
/* 
** @param jQuery [object] Pass the jQuery object 
** @param getMenu [object] jQuery DOM object (ul) that contains our menu 
** @parm getKeyTap [int] This is the e.keyCode passed from the event 
*/ 
var keyAction = function(jQuery,getMenu,getKeyTap) 
    { 
     // The variable is what is currently be acted on 
     var isSelected; 
     // This will designate first or last child 
     var getChild; 
     // This will be assigned the next, previous, or current child 
     var thisChild; 
     // We assign jQuery here 
     var $   = jQuery; 
     // These are all the keys we allow to be struck 
     var allowKeys = [38,40,13]; 
     // This is not used in this example, but can reset the keyCode 
     var keyCode  = false; 
     /* 
     ** @returns [boolean] This function returns if the key being pressed is arrow up/down 
     */ 
     var upDown  = function(getKeyTap) 
      { 
       return (getKeyTap == 38 || getKeyTap == 40); 
      } 
     /* 
     ** @returns [boolean] This method returns boolean true/false if up/down arrow pressed 
     */ 
     this.keyAllowed = function() 
      { 
       return upDown(getKeyTap); 
      } 
     /* 
     ** @description This method sees if pressed key is up/down arrow or return key 
     ** @returns [boolean] Will return true/false 
     */ 
     this.isAllowed = function() 
      { 
       return (allowKeys.indexOf(getKeyTap) != -1); 
      } 
     // This will manually set the keyCode (not required in this example) 
     this.setKey = function(keyCode) 
      { 
       getKeyTap = keyCode; 
       return this; 
      } 
     /* 
     ** @returns [object] This returns the current state of the DOM 
     */ 
     this.isSelected = function() 
      { 
       return isSelected; 
      } 
     /* 
     ** @description This will run an anonymous function passing the current DOM 
     ** @param thisChild [ANY] I pass the current DOM selection but, you 
     **      can pass whatever you want 
     ** @param func [function] This is what you want to run when the 
     **      return key is pressed 
     */ 
     this.setReturn = function(thisChild,func) 
      { 
       if(getKeyTap == 13) { 
        if(thisChild) 
         func(thisChild); 
       } 
      } 
     /* 
     ** @description This will set the current DOM and add the select class 
     ** @returns This will return the current DOM object 
     */ 
     this.firstClick = function() 
      { 
       getChild = (getKeyTap == 38)? 'last' : 'first'; 
       isSelected = getMenu.children('li:'+getChild+'-child'); 
       isSelected.addClass('selected'); 
       return isSelected; 
      } 
     /* 
     ** @description This method will move the selection up and down 
     ** @param isSelected [object] This is the current select DOM object 
     ** @returns [object] this will return the current selected DOM object 
     */ 
     this.currClick = function(isSelected) 
      { 
       var setSpot = 'last'; 

       if(getKeyTap == 38) 
        thisChild = isSelected.prev(); 
       else if(getKeyTap == 40) { 
        thisChild = isSelected.next(); 
        setSpot  = 'first'; 
       } 

       if(!thisChild.hasClass('selectable')) 
        thisChild = getMenu.children("li:"+setSpot+"-child"); 

       isSelected.removeClass('selected'); 
       thisChild.addClass('selected'); 
       return thisChild; 
      } 

     /* 
     ** @description This will just run a function 
     */ 
     this.doAction = function(func) 
      { 
       return func(); 
      } 
    } 

// When document is ready 
$(document).ready(function(){ 
    // Set container for this menu 
    var isSelected = false; 
    var qBox  = $('input[name=q]'); 
    // Use the document object to listen for a key press 
    $(this).keydown(function(e) { 
     // See where the cursor is focused 
     var isFocused = (e.target.nodeName == 'INPUT'); 
     // Start engine 
     var sMenu  = new keyAction($, $('ul'), e.keyCode); 
     // If it's focused 
     if(isFocused) { 
      // Place text into field on return   
      sMenu.setReturn(isSelected,function(obj) { 
       qBox.val(isSelected.text()); 
       // Submit form 
       $('#search').submit(); 
      }); 

      // If keys are allowed 
      if(sMenu.keyAllowed()) { 
       isSelected = (!isSelected)? sMenu.firstClick(isSelected) : sMenu.currClick(isSelected); 
       // Copy the value of the selection into the input 
       sMenu.doAction(function(){ 
        qBox.val(isSelected.text()); 
       }); 
      } 
     } 
    }); 
    // On key up in the text field 
    qBox.on('keyup',function(e){ 
     // If the key pressed is up or down arrow 
     if(e.keyCode == 38 || e.keyCode == 40) 
      // Don't do ajax call 
      return false; 
     // Run ajax 
     $.ajax({ 
      url:"search/suggest.php", 
      type:"get", 
      data: $(this).serialize(), 
      success:function(response) { 
       $('#dropdown_search').html(response); 
      } 
     }); 
    }); 
}); 

スタイル：

.selected { 
    background-color: #888; 
} 

HTそれがある場合には、以下のkeyCodeスクリプトをアクティブ化ML：フォーム

<div class="form-container"> 
    <form id="search" name="search"> 
     <input type="text" name="q" id="query-value" placeholder="Search with Ajax..."> 
    </form> 
</div> 
<ul id="dropdown_search"> 
</ul> 

HTML：AJAX（単なる例）から返さ

<li class="selectable">666554366</li> 
<li class="selectable">1174971318</li> 
<li class="selectable">1809433410</li> 
<li class="selectable">452149182</li> 
<li class="selectable">2024548770</li>