使用向上和向下箭头进行自动完成搜索 [英] Use up and down arrows for autocomplete search

问题描述

在google 中有很多自动完成jquery的例子，例如像搜索jquery一样在facebook上搜索

但是我无法找到任何显示如何使用向上和向下箭头键向下滚动结果。

我的结果div包含结果列表，如下所示：

那么如何使用向上和向下箭头键以及下面的代码向下滚动我的结果？

 < form id =search-formmethod =getaction =search.php> 
< input class =search-termstype =textvalue =Searchautocomplete =offname =resultsFor/> 
< input class =submit-searchtype =submitvalue =go/>< / form> 
< div id =resultsclass =shadowstyle =display：none;> 
< h4 class =tophit-titlestyle =background-color：＃4AABD8>热门歌曲< / h4> 
< ul id =tophit-list> 
< li> a target =& quot; _blank& quot; href =& quot; url.com？act = view& amp; amp; amp; id = 4& quot;& gt; 
 < span> a carton o 
< b> f< / b>密耳< /跨度>< /锂> 
< li> a target =& quot; _blank& quot; href =& quot; url.com？act = view& amp; amp; id = 2& quot;& gt; 
< img width =62height =62alt =img sample2src =http://127.0.0.1/sample2.JPG/> 
< span> a carton o 
< b> f< / b>密耳< /跨度>< /锂> 
< / ul> 
< / div> 
  

这是我的jquery函数：

 $（。search-terms）。keyup（function（e）{
 var searchbox = $（this）; 
 
 switch（e。 keyCode）{
 $ b $ case 38：
 alert（UP）; 
 break; 
 case 40：
 alert（DOWN）; 
 break; 
} 
}）; 
  

解决方案

这是一个基本功能，箭头键。

  $（ul）。keydown（function（e）{
 var searchbox = $（this）; 
 switch（e.which）{
 case 40：
 $（'li：not（：last-child）.selected'）。removeClass（'selected'）
。 nextClass（'selected'）; 
 break; 
 case 38：
 $（'li：not（：first-child）.selected'）。removeClass（'selected' ）
 .prev（）。addClass（'selected'）; 
 break; 
} 
}）; 
  

我们可以将此应用于具有输入的表单以移动所选项目。焦点需要保留在输入中才能正常工作

$（}> （例如：.search-terms）。keydown（function（e）{switch（e.which）{case 40：e.preventDefault（）; //防止移动光标$（'li：not（：last-child）.selected '）.removeClass（'selected'）.next（）。addClass（'selected'）; break; case 38：e.preventDefault（）; //防止移动光标$（'li：not（：first-child） .selected'）。removeClass（'selected'）.prev（）。addClass（'selected'）; break;}}）; $（'。search-terms'）。keyup（function（）{if（this.value .length> = 1）{$（'＃results'）。show（）;} else {$（'＃results'）。hide（）;}}） .selected {color：red}

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< form id =search-formmethod =getaction =search.php> < input class =search-termstype =textvalue =placeholder ='Search'autocomplete =offname =resultsFor/> < input class =submit-searchtype =submitvalue =go/>< / form>< div id =resultsstyle =display：none;> < h4 class =tophit-titlestyle =background-color：＃4AABD8>热门歌曲< / h4> < ul tabindex ='1'> < li class ='selected'> ok< / li> <李> OK< /锂> <李> OK< /锂> <李> OK< /锂> <李> OK< /锂> < / div>  

There are many examples onauto complete with jquery in google "eg searching facebook like search jquery"

But I cant find any that show how can you use the up and down arrow keys to scroll down on the results.

My "results" div contains a list of results as shown below:

So how I can scroll down on my results using the up and down arrow keys and the below code?

<form id="search-form" method="get" action="search.php">
    <input class="search-terms" type="text" value="Search" autocomplete="off" name="resultsFor" /> 
    <input class="submit-search" type="submit" value="go" /></form>
    <div id="results" class="shadow" style="display: none;">
      <h4 class="tophit-title" style="background-color: #4AABD8">Top Hits</h4>
      <ul id="tophit-list">
        <li>a target=&quot;_blank&quot; href=&quot;url.com?act=view&amp;id=4 &quot;&gt; 
        <img width="62" height="62" alt="img sample" src="http://127.0.0.1/sample.JPG" /> 
        <span>a carton o 
        <b>f</b> mil</span></li>
        <li>a target=&quot;_blank&quot; href=&quot;url.com?act=view&amp;id=2 &quot;&gt; 
        <img width="62" height="62" alt="img sample2" src="http://127.0.0.1/sample2.JPG" /> 
        <span>a carton o 
        <b>f</b> mil</span></li>
      </ul>
    </div>

This is my jquery function:

$(".search-terms").keyup(function (e) {
    var searchbox = $(this);

    switch (e.keyCode) {

        case 38:
            alert("UP");
            break;
        case 40:
            alert("DOWN");
            break;
    }
});

解决方案

This is a basic function to move through a list using the arrow keys.

$("ul").keydown(function (e) {
    var searchbox = $(this);
    switch (e.which) {
        case 40:
            $('li:not(:last-child).selected').removeClass('selected')
                 .next().addClass('selected');
            break;
        case 38:
            $('li:not(:first-child).selected').removeClass('selected')
                 .prev().addClass('selected');
            break;
    }
});

We can apply this to a form with an input to move the selected item. The focus needs to remain on the input for this to work

$(".search-terms").keydown(function(e) {
  switch (e.which) {
    case 40:
      e.preventDefault(); // prevent moving the cursor
      $('li:not(:last-child).selected').removeClass('selected')
        .next().addClass('selected');
      break;
    case 38:
      e.preventDefault(); // prevent moving the cursor
      $('li:not(:first-child).selected').removeClass('selected')
        .prev().addClass('selected');
      break;
  }
});

$('.search-terms').keyup(function() {
  if (this.value.length >= 1) {
    $('#results').show();
  } else {
    $('#results').hide();
  }
})

.selected {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="search-form" method="get" action="search.php">
  <input class="search-terms" type="text" value="" placeholder='Search' autocomplete="off" name="resultsFor" />
  <input class="submit-search" type="submit" value="go" /></form>

<div id="results" style="display: none;">
  <h4 class="tophit-title" style="background-color: #4AABD8">Top Hits</h4>
  <ul tabindex='1'>
    <li class='selected'>ok</li>
    <li>ok</li>
    <li>ok</li>
    <li>ok</li>
    <li>ok</li>
  </ul>
</div>

这篇关于使用向上和向下箭头进行自动完成搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！