無法標籤或箭頭鍵循環通過結果在新的div

Question

我已經使用.load（）與jquery調用一個PHP文件，將返回搜索結果回搜索輸入欄下面的div，但在div，使用TAB或向下箭頭不會在結果中循環。

很明顯，關鍵控制不知道結果的新分區存在。

我在尋找什麼來解決這個問題？

我打電話給我的PHP文件，從MySQL數據庫使用下面的代碼

$("#searchinput").keydown(function(e) { 
if(e.which == 8) { 
    SearchText = $("#searchinput").val().substring(0,$("#searchinput").val().length-1); 
} 

$("#searchresults").load("inc/ajax_search.php", { searchinput:SearchText }); 
    $("#searchresults").slideDown(); 

Answer 1

由於cruxst表明，對於這種事情的插件，但也許你並不想使用插件。也許你正試圖爲自己弄明白。

這是一段代碼，它實現了一個非常簡單的自動完成。這不是一個插件，它非常基本，但它具有基本功能。

你的問題表明你可能感興趣的功能是highlightResult。

腳本下面是所需的標記和樣式。

$(function() { 

    // OPTIONS 
    // length of time, in milliseconds, to wait after a keystroke before the search happens 
    // usually 250 ~ 400ms 
    var wait  = 250; 
    // the minimum number of characters required to search on 
    var minChars = 3; 
    var queryScript = 'inc/ajax_search.php'; 

    // cache our two main players for efficiency 
    var $input = $('#searchinput'); 
    var $output = $('#searchresults'); 

    // to store the timeout 
    var delay = null; 

    $input.keypress(function(e) { 
     switch(e.keyCode) { 
      case 13:  // return 
       e.preventDefault(); 
       selectResult(); 
       return; 
      case 38:  // up 
       e.preventDefault(); 
       highlightResult(-1); 
       return; 
      case 40:  // down 
       e.preventDefault(); 
       highlightResult(1); 
       return; 
      //case ... there may be keys that you want to ignore like left and right 
     } 
     clearTimeout(delay); 
     delay = setTimeout(search, wait); 
    }); 


    function search() { 
     var query = $.trim($input.val()); 
     if(query && query.length >= minChars) { 
      $output.load(queryScript, { searchinput: query }); 
     } 
    } 

    function highlightResult(n) { 

     if(Math.abs(n) != 1) return; 

     var hilgt = $output.find('.highlight'); 
     var newhilgt; 

     // if we don't have a highlighted element... 
     if(!hilgt.length) { 
      if(n > 0) { 
       // highlight the first one 
       $output.find('li').eq(0).addClass('highlight'); 
       // jq 1.4+ 
       //$output.find('li').first().addClass('highlight'); 
      } else { 
       // highlight the last one 
       $output.find('li').slice(-1).addClass('highlight'); 
       // jq 1.4+ 
       //$output.find('li').last().addClass('highlight'); 
      } 
     } 

     if(n > 0) { 
      var newhilgt = hilgt.next(); 
     } else { 
      var newhilgt = hilgt.prev(); 
     } 

     if(newhilgt.length) { 
      newhilgt.addClass('highlight'); 
      hilgt.removeClass('highlight'); 
     } 

    } 

    function selectResult() { 
     var sel = $output.find('.highlight'); 
     if(sel.length) { 
      // do something with the selected element 
      console.log(sel[0]); 
     } 
    } 

    // For completeness the functions below handle mouse stuff 
    $('#searchresults li').live('mouseover', function(e) { 
     $(this).siblings('.highlight').removeClass('highlight'); 
     $(this).addClass('highlight'); 
    }); 

    $('#searchresults li').live('click', function(e) { 
     e.preventDefault(); 
     selectResult(); 
    }) 

}); 

要求

<style type="text/css"> 
    .highlight { 
     background: red; 
    } 
</style> 

<input type="text" id="searchinput"/> 
<div id="searchresults"></div> 

從Ajax調用返回假設像

<ul> 
    <li>result 1</li> 
    <li>result 2</li> 
    <li>result 3</li> 
    ... 
</ul> 

Answer 2

聽起來像您選擇編寫自己的自動填充功能返回結果。你應該爲jQuery使用現有的自動完成插件。

http://docs.jquery.com/Plugins/Autocomplete