修复Jquery自动完成搜索框问题_Jquery_Ajax_Laravel

修复Jquery自动完成搜索框问题

jquery ajax laravel

修复Jquery自动完成搜索框问题,jquery,ajax,laravel,Jquery,Ajax,Laravel,JQUERY代码 $('#search').keyup(function() { check_search(); }); $('#search').focusout(function() { check_search(); }); function check_search() { var search

JQUERY代码

        $('#search').keyup(function() {
              check_search();
            });
            $('#search').focusout(function() {
              check_search();
            });
            function check_search() {
              var search = document.getElementById('search').value;
              if (search.length > 0) {
                $('#search').removeClass('border-danger');
                var _token = document.getElementById('_token').value;
                $.ajax({
                  url:"{{ route('pro.claim.autocomplete') }}",
                  method:"POST",
                  data:{search:search, _token:_token},
                  dataType:"json",
                  success:function(result){
                    $('#suggest_name').html(result);
                    $('#suggest_name').fadeIn();
                  }
                });
              } else {
                $('#suggest_name').fadeOut();
                $('#suggest_name').html('');
                $('#search').addClass('border-danger');
                $('#search').focus();
              }
            }
            // GET VALUE
            $(document).on('click','#select_name',function () {
              document.getElementById('search').value = $(this).attr('value');
              $('#suggest_name').fadeOut();
            });

        <div class="claim-searchbox">
                      <form id="search_business">
                        <div class="claim-searchInput">
                          <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
                          <input type="text" id="search" name="search" placeholder="Search business page">
                        </div>
                        <div class="suggest-name" id="suggest_name"></div>
                        <div class="claim-searchSubmit">
                          <input type="submit" value="Find Business">
                        </div>
                      </form>
                    </div>

     // AUTOCOMPLETE
        public function autocomplete(Request $request)
        {
            $search = $request->search;
            $names = ProListing::where('name','like','%'.$search.'%')->get();
            $result = '<ul>';
            if (count($names) > 0) {
                foreach ($names as $name) {
                    $result .= '<li id="select_name" value="'.$name->name.'">'.$name->name.'</li>';
                }
            } else {
                $result .= '<li class="no-result">No Business Page Available</li>';
            }
            $result .= '</ul>';
            return response()->json($result);
        }

HTML代码

        $('#search').keyup(function() {
              check_search();
            });
            $('#search').focusout(function() {
              check_search();
            });
            function check_search() {
              var search = document.getElementById('search').value;
              if (search.length > 0) {
                $('#search').removeClass('border-danger');
                var _token = document.getElementById('_token').value;
                $.ajax({
                  url:"{{ route('pro.claim.autocomplete') }}",
                  method:"POST",
                  data:{search:search, _token:_token},
                  dataType:"json",
                  success:function(result){
                    $('#suggest_name').html(result);
                    $('#suggest_name').fadeIn();
                  }
                });
              } else {
                $('#suggest_name').fadeOut();
                $('#suggest_name').html('');
                $('#search').addClass('border-danger');
                $('#search').focus();
              }
            }
            // GET VALUE
            $(document).on('click','#select_name',function () {
              document.getElementById('search').value = $(this).attr('value');
              $('#suggest_name').fadeOut();
            });

        <div class="claim-searchbox">
                      <form id="search_business">
                        <div class="claim-searchInput">
                          <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
                          <input type="text" id="search" name="search" placeholder="Search business page">
                        </div>
                        <div class="suggest-name" id="suggest_name"></div>
                        <div class="claim-searchSubmit">
                          <input type="submit" value="Find Business">
                        </div>
                      </form>
                    </div>

     // AUTOCOMPLETE
        public function autocomplete(Request $request)
        {
            $search = $request->search;
            $names = ProListing::where('name','like','%'.$search.'%')->get();
            $result = '<ul>';
            if (count($names) > 0) {
                foreach ($names as $name) {
                    $result .= '<li id="select_name" value="'.$name->name.'">'.$name->name.'</li>';
                }
            } else {
                $result .= '<li class="no-result">No Business Page Available</li>';
            }
            $result .= '</ul>';
            return response()->json($result);
        }

LARAVEL代码

        $('#search').keyup(function() {
              check_search();
            });
            $('#search').focusout(function() {
              check_search();
            });
            function check_search() {
              var search = document.getElementById('search').value;
              if (search.length > 0) {
                $('#search').removeClass('border-danger');
                var _token = document.getElementById('_token').value;
                $.ajax({
                  url:"{{ route('pro.claim.autocomplete') }}",
                  method:"POST",
                  data:{search:search, _token:_token},
                  dataType:"json",
                  success:function(result){
                    $('#suggest_name').html(result);
                    $('#suggest_name').fadeIn();
                  }
                });
              } else {
                $('#suggest_name').fadeOut();
                $('#suggest_name').html('');
                $('#search').addClass('border-danger');
                $('#search').focus();
              }
            }
            // GET VALUE
            $(document).on('click','#select_name',function () {
              document.getElementById('search').value = $(this).attr('value');
              $('#suggest_name').fadeOut();
            });

        <div class="claim-searchbox">
                      <form id="search_business">
                        <div class="claim-searchInput">
                          <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
                          <input type="text" id="search" name="search" placeholder="Search business page">
                        </div>
                        <div class="suggest-name" id="suggest_name"></div>
                        <div class="claim-searchSubmit">
                          <input type="submit" value="Find Business">
                        </div>
                      </form>
                    </div>

     // AUTOCOMPLETE
        public function autocomplete(Request $request)
        {
            $search = $request->search;
            $names = ProListing::where('name','like','%'.$search.'%')->get();
            $result = '<ul>';
            if (count($names) > 0) {
                foreach ($names as $name) {
                    $result .= '<li id="select_name" value="'.$name->name.'">'.$name->name.'</li>';
                }
            } else {
                $result .= '<li class="no-result">No Business Page Available</li>';
            }
            $result .= '</ul>';
            return response()->json($result);
        }

//自动完成
公共功能自动完成（请求$Request）
{
$search=$request->search；
$names=ProListing:：where（'name'，'like'，'%.$search.'%'）->get（）；
$result=''；
如果（计数（$names）>0）{
foreach（$name作为$name）{
$result.=''.$name->name.”；
}
}否则{
$result.='没有可用的业务页面；
}
$result.=''；
返回响应（）->json（$result）；
}

问题详情：

一切正常。按要求进行fadeIn。但当我单击将值设置为搜索框

$（“#建议_名称”）.fadeOut（）时不淡出并再次显示，然后在第二次后单击淡出。但我想在第一次单击后淡出div。获取搜索框中的值


**帮助我解决此问题
您指的是//GET VALUE注释后面的代码块吗？如果是，单击ID为#select_name的元素会触发单击，但在HTML中没有该ID的元素。请告诉我您是否实际引用了check_搜索函数中的另一个$（“#suggest_name”）.fadeOut（）。我将编辑我的内容。我将提供laravel代码。请帮助我如何解决这个@DougFIs的点击功能执行？如果你把断点放在那里，它会被击中吗？单击函数执行，但它会再次显示为相同的结果。但我正在运行代码，在搜索框中获得值后淡出这个div。在那里，在搜索框中获取值，但没有将其淡出。在第二次点击你的Laravel代码@DougFLooking后，它会消失，我注意到你有一个循环，它输出一个id为“select_name”的li元素，但是如果循环运行多次，那么你会有许多id相同的元素，这会导致问题。我建议改为将id设为类，然后看看它的作用。您是指//GET VALUE注释后面的代码块吗？如果是，单击ID为#select_name的元素会触发单击，但在HTML中没有该ID的元素。请告诉我您是否实际引用了check_搜索函数中的另一个$（“#suggest_name”）.fadeOut（）。我将编辑我的内容。我将提供laravel代码。请帮助我如何解决这个@DougFIs的点击功能执行？如果你把断点放在那里，它会被击中吗？单击函数执行，但它会再次显示为相同的结果。但我正在运行代码，在搜索框中获得值后淡出这个div。在那里，在搜索框中获取值，但没有将其淡出。在第二次点击你的Laravel代码@DougFLooking后，它会消失，我注意到你有一个循环，它输出一个id为“select_name”的li元素，但是如果循环运行多次，那么你会有许多id相同的元素，这会导致问题。我建议把id改为一个类，看看它能让你得到什么。