Jquery UI自动完成显示所有数据

Jquery UI autocomplete show all data

本文关键字：显示 数据 UI Jquery      更新时间：2023-09-26

我使用JQuery的自动完成小部件使用JSON来解析，但不工作，显示所有JSON数据。

请帮帮我

这是我的脚本:

$(function() {    
    $( "#test2" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://some_link/folder/file.json",
                dataType: "json",
                data: {terms: request.term},
                success: function( data ) {
                    response( $.map( data, function( item ) {
                        return {
                            label: item.city+' ('+item.country_name+'), '+item.currency,
                            value: item.city
                        }
                    }));
                }
            });
        },
        minLength: 2,

    });
});

这是json

[{"country_name":"DENMARK","city":"Aalborg","currency":"EUR"},{"country_name":"DENMARK","city":"Aarhus","currency":"EUR"}]

这是html

<div class="form-box">
    <center><label style="color:white;">City <small>*</small></label></center>
    <input type="text" class="text" id="test2" placeholder="Your City">
  </div><!-- End Box -->

请帮忙!

TNX

看起来您没有对请求的json文件应用过滤器。你会得到整个档案的。我目前假设你提到的json文件是一个普通的json文件(意思是，它没有创建它的服务器端代码)。

您可以做两件事:a)修改$.map内部的返回函数，以便您可以删除所有不满足您的过滤器的值(即，您可以删除不包含给定文本部分的城市)。为了找到符合您标准的值，您可以使用如下简单的东西:

或者b)您可以使用一些服务器语言(如PHP, Java, c#等)创建JSOn服务器端，在那里，您可以在$.ajax那里读取您传递给data的terms参数并通过服务器端执行过滤。然后，您只需要返回实际符合条件的值。

相关文章：