Question

我有一个文本框来显示来自json文件的数据。当我输入文本框时，我想显示标准为“自动完成”的数据。但是当我用萤火虫追踪时。然后我在选项卡响应/ HTML中返回如下：

{"rajaongkir":{"query":[],"status":{"code":200,"description":"OK"},
"results":[
{"province_id":"1","province":"Bali"},
{"province_id":"2","province":"Bangka Belitung"},
{"province_id":"3","province":"Banten"},
{"province_id":"4","province":"Bengkulu"},
{"province_id":"5","province":"DI Yogyakarta"},
{"province_id":"6","province":"DKI Jakarta"} 
{"province_id":"7","province":"Sumatera Selatan"},
{"province_id":"8","province":"Sumatera Utara"}
]}}

这是我的代码：

<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
 $(function() { 
    $( "#kotaAsaljne" ).autocomplete({ 
     source: "city.php",
     minLength: 3,
     search: function( event, ui ) {     
      $( "#kotaAsaljne" ).val(0);
  },
  select: function( event, ui ) { 
      if (ui.item) { 
          $( "#kotaAsaljne" ).val(ui.item.province);
      } else {
          $( "#kotaAsaljne" ).val(0);
      } 
  }
  }); 
});
</script>
</head>
<body> 
from : <input type="text" name="kotaAsaljne" id="kotaAsaljne"/> 

</body>
</html>

请帮帮我... 谢谢！

Answer 1

您需要使用自定义函数作为源并操纵来自服务器的数据。

试试这个：

$(function () {
    $("#kotaAsaljne").autocomplete({
        minLength: 3,
        source: function (request, response) {
            $.ajax({
                url: 'city.php',
                data: {search: request},
                dataType: "json",
                type: "POST",
                success: function (data) {
                    response($.map(data.results, function (item) {
                        return {
                            label: item.province,
                            val: item.province_id
                        };
                    }));
                },
                error: function (response) {
                    console.log("error",response);
                }
            });
        },
        select: function (e, i) {
            // your on select callback
        },
    });
});

我希望它会对你有所帮助。有关功能源的更多信息，请参阅此处 https://api.jqueryui.com/autocomplete/#option-source

如何将结果从json显示到文本框

1 个答案: