Question

我正在尝试实现自动完成jQuery，但我不理解jQuery UI提供的autocomplete函数。

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

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);
    }
});

谢谢

Answer 1

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

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

Answer 2

您应该在源代码中返回一个数组，即使它只是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
            }
            }));
            }
        });
    }
});

Answer 3

@LakshmikanthanVijayaraghavan

正如您在Autocomplete guide所看到的，有三种方法可以使用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必须返回标签/值对的数组。

希望这有帮助

Answer 4

Ajax，Key Value对，Min Length触发搜索。简单代码

<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

Answer 5

@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>

使用jQuery回调自动完成（标签/值对）

5 个答案: