使用 jQuery 回调(标签/值对)自动完成

我正在尝试实现自动完成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);
    }
});

谢谢<</p>

div class="one_answers">

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

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

你应该在你的源中返回一个数组，即使它在本例中只有 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
            }
            }));
            }
        });
    }
});

@LakshmikanthanVijayaraghavan

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

提供包含值列表的数组
提供对象数组，其中值/标签对
提供用于获取对象数组的 URL

前两个选项用于固定的值列表。如果要以动态方式填充自动完成列表，则必须实现最后一个列表。

为此，您必须指定一个 url 来获取对象数组。如果要隐藏标签和键，则需要隐藏输入类型并设置其值。

例如

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

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

希望这有帮助

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

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

相关内容

最新更新

热门标签：