自動完成jquery不工作，它顯示所有數據

我想用jquery插件創建自動完成輸入標籤，但它顯示所有數據而不是搜索關鍵字。下面是我的html代碼，js和JSON源自動完成jquery不工作，它顯示所有數據

xml.html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQueryUI Auto Complete</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <style> 
    .ui-autocomplete-loading { 
     background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat; 
    } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
    <script src="js/suggestionBox.js"></script> 
    <script> 

    </script> 
</head> 
<body> 

<div class="ui-widget"> 
    <label for="birds">London matches: </label> 
    <input class="content2" id="txtFastQuote" name="txtFastQuote" size="20" "> 
</div> 

<div class="ui-widget" style="margin-top:2em; font-family:Arial"> 

    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> 
</div> 


</body> 
</html>

這裏是我的建議Box.js，在這裏我把我的javascript代碼

$(document).ready(function() { 
      $("#txtFastQuote").autocomplete({ 
       source: function (request, response) { 
        $.ajax({ 
         url: "countries.json", 
         dataType: "json", 
         type: "POST", 
         success: function (data) { 
          response($.map(data, function (item) { 
           return { 
            label: item.name, 
            value: item.code 
           } 
          })) 
         }, 
         error: function (a, b, c) { 
          debugger; 
         } 
        }); 

       }, 
       minLength: 1 
      }); 
     });

我countries.json文件

[ 
    {"name": "Afghanistan", "code": "AF"}, 
    {"name": "Albania", "code": "AL"}]

來源

2016-07-18 Nur Wafiqa

您需要自行篩選回覆，根據提供的值'request' –

對不起，我不明白，你能否詳細解釋一下？ –

使用$ .getJSON（） –

嘗試使用此代碼，

$(document).ready(function() { 
     $("#txtFastQuote").autocomplete({ 
      source: function(request, response) { 
       $.getJSON('data/countries.json', { q: request.term }, function(data) { 
        response($.map(data.destinations, function(item) { 
         return item.name; 
        })); 
       }); 
      } 
     }); 

    });

來源

2016-07-18 08:59:20

它沒有工作，它保持顯示所有數據..如果我搜索阿富汗，它顯示所有的數據，而不是阿富汗尼斯 –

驗證你的json結構是否正確 –

{「country」：[ {「name」：「阿富汗」，「代碼」：「AF」}， {「name」：「Albania」，「code」：「AL」}， {「name」：「Algeria」，「code」 }， {「name」：「American Samoa」，「code」：「AS」}， {「name」：「AndorrA」，「code」：「AD」}]}，我已經改變了data.country在我的javascript中 –

自動完成jquery不工作，它顯示所有數據

回答

相關問題