自动完成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"}]

您需要自行筛选回复，根据提供的值'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; 
        })); 
       }); 
      } 
     }); 

    });

它没有工作，它保持显示所有数据..如果我搜索阿富汗，它显示所有的数据，而不是阿富汗尼斯 –

验证你的json结构是否正确 –

{“country”：[ {“name” ：“阿富汗”，“代码”：“AF”}， {“name”：“Albania”，“code”：“AL”}， {“name”：“Algeria”，“code” }， {“name”：“American Samoa”，“code”：“AS”}， {“name”：“AndorrA”，“code”：“AD”}]}，我已经改变了data.country在我的javascript中 –

自动完成jquery不工作，它显示所有数据

相关推荐