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

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

jquery html json

Jquery 如何将结果从json显示到文本框,jquery,html,json,Jquery,Html,Json,我有一个文本框来显示json文件中的数据。当我在文本框中键入时，我想将带有条件的数据显示为自动完成。但当我用萤火虫追踪的时候。我在tab Response/HTML中得到如下返回： {"rajaongkir":{"query":[],"status":{"code":200,"description":"OK"}, "results":[ {"province_id":"1","province":"Bali"}, {"province_id":"2","province":"Bangka Be

我有一个文本框来显示json文件中的数据。当我在文本框中键入时，我想将带有条件的数据显示为自动完成。但当我用萤火虫追踪的时候。我在tab Response/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>

请帮帮我。。。

谢谢

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

试试这个：

$(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
        },
    });
});

我希望它能帮助你。有关函数源的更多信息，请参阅此处

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

试试这个：

$(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
        },
    });
});

我希望它能帮助你。有关函数源的更多信息，请参阅此处

您面临的问题是什么？请提出明确的问题？该问题不会将具有自动完成功能的文本框的值jQuery UI autocomplete support source显示为具有标签和值属性的对象数组。因此，您需要更改服务器端或客户端的格式。请给我“客户端”的解决方案，谢谢……您面临的问题是什么？请提出明确的问题？该问题不会将具有自动完成功能的文本框的值显示为具有标签和值属性的对象数组。所以您需要在服务器端或客户端更改格式，请给我“客户端”的解决方案，谢谢…控制台中有错误吗？提供完整的详细信息控制台中有什么不工作的错误？提供不起作用的全部细节