无法标签或箭头键循环通过结果在新的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