7

我正在尝试实现自动完成 jQuery，但不了解jQuery UI 提供的自动完成功能。

它使用回调函数并将响应作为标签/值对获取。我有一些示例代码，我试图将任意标签/值对传回并显示该选项，但它不起作用。如果有人可以帮助我或向我展示一个简单的程序，那就太好了。

http://jsfiddle.net/kB25J/

HTML：

<html>
    <body>
      Please enter your country name
      <input id ="book" type="text" value="">
    </body>
</html>​

JavaScript：

$("#book").autocomplete({
    source: function(request, response) {
        alert(request.term);
        response(function() {
            return {
                label: "hi",
                value: "bye"
            }
        });
        alert(reponse);
    }
});

​谢谢

4

5 回答 5

8

发送响应时，传递一个数组而不是函数。

$(function() {
    $("#book").autocomplete({        
        source: function(request, response) {
            var data = [{
                    label: "hi",
                    value: "bye"
                    }];
            response(data);
        },
        select: function( event, ui ) {
            $( "#book" ).val( ui.item.label); //ui.item is your object from the array
            return false;
        }
    });
});​
于 2012-09-19T15:07:53.053 回答
4

您应该在源中返回一个数组，即使在这种情况下它只有 1 个匹配 'hi'/'bye'

如 jqueryui.com 上的此示例所示

response( $.map( data.geonames, function( item ) {
    return {
        label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
        value: item.name
    }
}));

它使用远程响应上的映射返回标签/值的键/值对数组。

如果您的来源只是国家/地区列表，您可以使用字符串数组作为来源。

var countries = ["USA", "Canada", "Mexico", ...]

$('input').autocomplete({
    source : countries
});

如果您正在使用远程源：

$('input').autocomplete({
    source : function (request, response) {
        $.ajax({
            url: "url_to_get_countries",
            dataType: "json",
            success: function( data ) {
            response( $.map( data.countries, function( item ) {
            return {
                label: item.country_name,
                value: item.country_id
            }
            }));
            }
        });
    }
});
于 2012-09-19T14:40:01.093 回答
1

@LakshmikanthanVijayaraghavan

正如您在自动完成指南中看到的，使用 jquery 插件实现自动完成有三种方法。

  • 提供一个包含值列表的数组
  • 提供一个对象数组，其中包含对值/标签
  • 提供一个 url 来获取对象数组

前两个选项用于固定值列表。如果你想动态地填充自动完成列表，你必须实现最后一个。

为此，您必须指定一个 url 来获取 objects 数组。如果你想隐藏标签和键，你需要创建一个隐藏的输入类型并设置他的值。

例如

$( "#book" ).autocomplete({
           source: "getValues.htm",                     
           select: function(event, ui) {  
                $( "#book" ).val(ui.item.label);  
                $( "#book_hidden" ).val(ui.item.value);
                return false;  
            }                           
        });

getValues.html 必须返回标签/值对的数组。

希望这可以帮助

于 2012-09-19T15:02:04.000 回答
1

Ajax，键值对，触发搜索的最小长度。简单代码

<script>
    $(function () {
        $("#CompanySearch").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/Admin/GetCompanyAutoComplete',
                    dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                        response(data);
                    }
                });
            },
            minLength: 2
        });
    });
</script>

更多

https://stackoverflow.com/a/40883309/5237614

于 2016-11-30T08:27:41.507 回答
1

@Edathadan您的回复是最好的解决方案。但是，我认为我们需要保留原始请求，因此您应该修改为：

<script>
    $(function () {
        $("#CompanySearch").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/Admin/GetCompanyAutoComplete?term=' + request.term,
                    dataType: "json",
                    success: function (data) {
                        response(data);
                    }
                });
            },
            minLength: 2
        });
    });
</script>
于 2017-11-23T04:15:18.560 回答