使用向上和向下箭頭用於自動完成搜索

Question

有許多例子onauto在谷歌使用jQuery完成

但我不能找到「例如搜索，例如搜索jQuery的Facebook的」任何顯示如何可以使用上下箭頭鍵向下滾動結果。

我的「成果」 div包含如下圖所示的結果列表：

所以我怎麼能下使用向上和向下箭頭鍵和下面的代碼我的結果滾動？

<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> 

這是我的jQuery函數：

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

    switch (e.keyCode) { 

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

Answer 1

這是通過使用列表中的箭頭鍵移動基本功能。

$("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; 
    } 
}); 

我們可以將此應用於具有輸入的表單以移動所選項目。重點需要保持在輸入這個工作

$(".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>

Answer 2

在我在我回憶起做類似的東西的項目之一。我挖了你的檢查代碼（DSL代表動態搜索列表）：

var dslTimer = []; 
var dslData = []; 
var dslControls = []; 
var dslSelected = []; 
var dslSelectedIndex = 0; 

var callBackFunction; 

function addDsl(inputField, dslPlaceHolder, dslUrl, maxDepth, callback, countryLimitation) { 
    var dslIndex = dslControls.length + 1; 
    dslControls[dslIndex] = [inputField, dslPlaceHolder, dslUrl, maxDepth, countryLimitation]; 
    callBackFunction = callback; 

    $('#' + inputField).keyup(function(e) { 
     var key = e.keyCode; 
     if (key == '13') { 
      if ($('#' + dslControls[dslIndex][1]).hasClass('hidden') && $('#' + inputField).val().length > 0) { 
       if (callback == null) { 
        $('#' + dslControls[dslIndex][1]).closest('form').submit(); 
       } 
       else { 
        callback(); 
       } 
      } 
      else { 
       $('#' + dslControls[dslIndex][1]).addClass('hidden'); 
      } 
     } else if (key == '38') { 
      //Up key 
      $('#' + dslControls[dslIndex][1] + ' ul li:nth-child(' + dslSelectedIndex + ') a').removeClass('highlight'); 
      dslSelectedIndex -= 1; 
      if (dslSelectedIndex < 0) { 
       dslSelectedIndex = $('#' + dslControls[dslIndex][1] + ' ul li').length; 
      } 
      $('#' + dslControls[dslIndex][1] + ' ul li:nth-child(' + dslSelectedIndex + ') a').addClass('highlight'); 

      var str = $('#' + dslControls[dslIndex][1] + ' ul li:nth-child(' + dslSelectedIndex + ') a').text(); 
      if (str != null && str != "") { 
       $('#' + dslControls[dslIndex][0]).val(str); 
      } 
     } else if (key == '40') { 
      //Down key 
      $('#' + dslControls[dslIndex][1] + ' ul li:nth-child(' + dslSelectedIndex + ') a').removeClass('highlight'); 
      dslSelectedIndex += 1 
      if (dslSelectedIndex > $('#' + dslControls[dslIndex][1] + ' ul li').length) { 
       dslSelectedIndex = 0; 
      } 
      $('#' + dslControls[dslIndex][1] + ' ul li:nth-child(' + dslSelectedIndex + ') a').addClass('highlight'); 

      var str = $('#' + dslControls[dslIndex][1] + ' ul li:nth-child(' + dslSelectedIndex + ') a').text(); 
      if (str != null && str != "") { 
       $('#' + dslControls[dslIndex][0]).val(str); 
      } 
     } else { 
      var input = $('#' + dslControls[dslIndex][0]).val(); 

      if (input.length >= 2) { 
       window.clearTimeout(dslTimer[dslIndex]); 
       dslTimer[dslIndex] = window.setTimeout('doDsl(' + dslIndex + ')', 100); 
      } 
      else { 
       $('#' + dslControls[dslIndex][1]).addClass('hidden'); 
      } 
     } 
    }); 
    $('#' + inputField).blur(function(e) { 
     window.setTimeout('blurDsl(' + dslIndex + ')', 500); 
    }); 

    return dslIndex; 
} 

function doDsl(dslIndex) { 
    getDsl(dslIndex, $('#' + dslControls[dslIndex][0]).val()); 
} 

function getDsl(dslIndex, searchstring) { 
    if (searchstring.length < 2) { 
     return; 
    } 

    var postData = { 'input': searchstring, 'maxDepth': dslControls[dslIndex][3] }; 
    if (typeof (dslControls[dslIndex][4]) != 'undefined' || dslControls[dslIndex][4] != null) { 
     postData.countryId = dslControls[dslIndex][4].val(); 
    } 

    $.ajax({ 
     type: 'POST', 
     url: dslControls[dslIndex][2], 
     data: postData, 
     dataType: "json", 
     contentType: "application/x-www-form-urlencoded", 
     timeout: 60000, 
     global : false, 
     success: function (data) { 
      (data.length > 0) 
       ? showDsl(dslIndex, data) 
       : blurDsl(dslIndex); 
     } 
    }); 
} 

function showDsl(dslIndex, data) { 
    dslData[dslIndex] = data; 
    dslSelected[dslIndex] = null; 

    var htmlString = '<ul>'; 
    var searchText = $('#' + dslControls[dslIndex][0]).val().ignoreAccent(); 

    $.each(data, function(i, item) { 
     var text = item.Text; 
     var accentlessText = item.AccentlessText.Value; 

     var boldStart = accentlessText.toLowerCase().indexOf(searchText.toLowerCase()); 
     while (boldStart > -1 && searchText.length > 0) { 
      text = text.substring(0, boldStart) + '<strong>' + text.substring(boldStart, (boldStart + searchText.length)) + '</strong>' + text.substring((boldStart + searchText.length), text.length); 

      boldStart = accentlessText.toLowerCase().indexOf(searchText.toLowerCase(), (boldStart + 17 + searchText.length)); 
     } 
     htmlString += '<li><a href="javascript:void(0)" onmousedown="selectDsl(' + dslIndex + ', \'' + item.Id + '\')" tabindex="' + (1000 + i) + '">' + text + '</a></li>'; 
    }); 
    htmlString += '</ul>'; 

    $('#' + dslControls[dslIndex][1] + ' ul').replaceWith(htmlString); 

    dslSelectedIndex = 0; 
    if (data.length > 0) { 
     $('#' + dslControls[dslIndex][1]).removeClass('hidden'); 
    } 
} 

function selectDsl(dslIndex, id) { 
    $('#' + dslControls[dslIndex][1]).addClass('hidden'); 
    $.each(dslData[dslIndex], function(i, item) { 
     if (item.Id == id) { 
      $('#' + dslControls[dslIndex][0]).val(item.Text); 
      dslSelected[dslIndex] = item; 
      if (callBackFunction != null) { 
       callBackFunction(); 
      } 
     } 
    }); 
} 

function blurDsl(dslIndex) { 
    $('#' + dslControls[dslIndex][1]).addClass('hidden'); 
} 

// Source: https://github.com/zimny/accentless 
(function() { 
    if (String.prototype.ignoreAccent) return; 

    var AccentCharCodesTable = { 
     "a": [224, 229], 
     "A": [192, 198], 
     "c": [231, 231], 
     "C": [199, 199], 
     "e": [231, 235], 
     "E": [200, 203], 
     "i": [236, 239], 
     "I": [204, 208], 
     "n": [241, 241], 
     "N": [209, 209], 
     "o": [242, 246], 
     "O": [209, 214], 
     "s": [353, 353], 
     "S": [352, 352], 
     "u": [248, 252], 
     "U": [216, 220], 
     "y": [253, 253], 
     "Y": [221, 221], 
     "z": [382, 382], 
     "Z": [381, 381] 
    }; 

    String.prototype.ignoreAccent = function() { 
     var i, currentCharCode, char, str = this.split(""); 

     for (i = 0; i < str.length; i++) { 
      currentCharCode = str[i].charCodeAt(0); 
      if (currentCharCode < 192) continue; 
      for (char in AccentCharCodesTable) { 
       if (AccentCharCodesTable.hasOwnProperty(char)) { 
        if (currentCharCode >= AccentCharCodesTable[char][0] && currentCharCode <= AccentCharCodesTable[char][1]) { 
         str[i] = char; 
         break; 
        } 
       } 
      } 
     } 
     return str.join(""); 
    }; 
})();