时间戳

首页 > 解决方案 > ajax 实时搜索添加按键向下功能

javascript - ajax 实时搜索添加按键向下功能

问题描述

我想让实时搜索框像 google 一样，我已经实现 jquery ajax 到后端以获取结果，但是我想在用户按下按键时启用我想像 google 一样向 ajax 返回建议添加一个类，当当用户按下回车键时，用户按下建议高亮将转到一个位置，它将转到 href。以下是我的 ajax 返回 html 代码：

<ul id="suggestion" style="list-style-type: none;">
<li><a class="suggestion-link" href="http://eled.test/post/sunt-iure-nihil-deleniti-rerum"> Sunt Iure Nihil Deleniti Rerum.</a> 
</li>

<li><a class="suggestion-link" href="http://eled.test/post/porro-et-numquam-nihil-nesciunt-nesciunt"> Porro Et Numquam Nihil Nesciunt Nesciunt.</a> 
</li>

<li><a class="suggestion-link" href="http://eled.test/post/my-new-post-yeah"> My New Post Yeah !!</a> </li>

<li><a class="suggestion-link" href="http://eled.test/post/rerum-voluptatem-fuga-excepturi-provident-et-distinctio"> Rerum Voluptatem Fuga Excepturi Provident Et...</a> 
</li>

</ul>

下面是我的搜索表格

<form method="GET" action="{{route('home.search')}}" class="search-form" id="search-form" >
              <div class="form-group">

                <input type="text" name="keyword" id="search-input" placeholder="What are you looking for?" autocomplete="off">

                <button type="submit" class="submit"><i class="fas fa-search"></i></button>
              </div>


              <ul id="suggestion" style="display: none;list-style-type: none; "></ul>
            </form>

下面是我的ajax

$(document).ready(function() {
  //sidebar search function ajax
   $("#search-input").keyup(function() {
       var keyword = $('#search-input').val();
       var url = "{{route('home.ajax_search')}}";
       if (keyword == "") {
           $("#suggestion").html("");
           $('#suggestion').hide();
       }else {
           $.ajax({
               type: "GET",
               url: url ,
               data: {
                   keyword: keyword
               },
               success: function(data) {
                   $("#suggestion").html(data).show();
                   //console.log(data);
                       $('#search-input').on("keydown", function (e) {

                          var listItems = $('.suggestion-link');

                          switch(e.which) {

                              case 38:
                              console.log('up');
                              break;

                              case 40:
                              listItems.addClass('selected');
                              console.log('down');
                              break;
                              default: return;
                          }        

                      });
               }
           });
           
       }

   });

});

在 ajax 内部，当我尝试按下和向上键时，我可以让控制台日志工作。38 / 40，但我无法将所选类添加到我遵循的 li 元素添加 keydown（键盘箭头向上/向下）支持 AJAX Live Search PHP 问题是我无法将活动类应用于返回元素，因此用户不会知道密钥向下/向上工作谢谢

标签： javascriptjqueryajaxsearch

解决方案

首先，当你渲染结果时，给每个 li 元素一个 ID。ID 可以是循环的索引。只需确保 ID 是连续的。然后你可以使用类似的东西：

let highlighted = 0;

$('#search-input').on('keydown', function(e) {
   
   //check if pressed key is down or up
   // 40 is a code for down arrow, 38 for up

   if([38, 40].indexOf(e.which) < 0) 
      return;

    //remove highlighted class from all list elements here

    $('#suggestion').find('li.highligted').removeClass('highligted');    

    //handle down and up keypress here
    
    hightlighted = e.which == 40 ? highlighted + 1 : highligted - 1;        
    
    $('#suggestion-'+highlighted).addClass('highligted');

});

推荐阅读