Question

我正在使用jquery autocomplete创建一个搜索栏。

以下是我的自动填充代码：

<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $(".txtSearch").autocomplete(
            {
                source: function (request, response) {
                    $.ajax({
                        url: '@Url.Action("AutoComplete", "components")',
                        type: "GET",
                        data: request,
                        success: function (data) {
                            response($.map(data, function (el) {
                                return {
                                    label: el.autoSuggest,
                                    value: el.resultCount
                                };
                            }));
                        }
                    });
                },
                minLength: 3,
                select: function (event, ui) {
                    $(this).val(ui.item.label);
                    var values = ui.item.label;
                    $.ajax({
                        type: 'GET',
                        contentType: 'application/json',
                        cache: false,
                        url: '@Url.Action("SearchFunc", "components")',
                        dataType: 'json',
                        data: { searchTerm: values }
                    }).done(function (result) {

                        window.location.href = "search.aspx?pass=" + encodeURIComponent(result);
                    })
                }
            }).data("ui-autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
            .data("ui-autocomplete-item", item)
            .append("<a><table width='100%'><tr><td><strong>" + item.label + "</strong></td><td align='right' style='font-size: 10px;'>" + item.value + "</td></tr></table></a>")
            .appendTo(ul);
            };
        });
    });
</script>

例如，如果有人开始输入“shi”，则自动完成功能会显示如下输出：

shirts      2results
tshirts     3results

我的问题是，当我选择任何自动推荐选项时，文本框仅显示值而非标签。

例如，在上述情况下，如果我选择衬衫，则文本框会显示 2结果。但是在我的第二个ajax函数中传递的参数是正确的，即衬衫

有人可以建议解决方案吗？

Answer 1

我认为您需要在select事件中取消默认操作：

select: function (event, ui) {
    event.preventDefault();
    $(this).val(ui.item.label);
    // rest of code

如果您不取消select事件，jQuery UI将使用项目的值覆盖文本框文本。

PS：我宁愿不在链接中嵌套表格。使用浮动跨度。

Answer 2

我终于解决了这个问题（感谢Salman A :)）。这是我做的：

我已按照Salman

的建议在select事件中添加了event.preventDefault（）

此外，我添加了焦点事件。

所以最终的代码是：

<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $(".txtSearch").autocomplete(
            {
                source: function (request, response) {
                    $.ajax({
                        url: '@Url.Action("AutoComplete", "components")',
                        type: "GET",
                        data: request,
                        success: function (data) {
                            response($.map(data, function (el) {
                                return {
                                    label: el.autoSuggest,
                                    value: el.resultCount
                                };
                            }));
                        }
                    });
                },
                minLength: 3,
                focus: function (event, ui) {
                    event.preventDefault();
                    $(this).val(ui.item.label);
                },
                select: function (event, ui) {
                    event.preventDefault();
                    $(this).val(ui.item.label);
                    var values = ui.item.label;
                    $.ajax({
                        type: 'GET',
                        contentType: 'application/json',
                        cache: false,
                        url: '@Url.Action("SearchFunc", "components")',
                        dataType: 'json',
                        data: { searchTerm: values }
                    }).done(function (result) {
                        if (result == null || result == "") {
                            result = 0;
                        }

                        window.location.href = "search.aspx?pass=" + encodeURIComponent(result);
                    })
                }
            }).data("ui-autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
            .data("ui-autocomplete-item", item)
            .append("<a><table width='100%'><tr><td><strong>" + item.label + "</strong></td><td align='right' style='font-size: 10px;'>" + item.value + "</td></tr></table></a>")
            .appendTo(ul);
            };
        });
    });
</script>

jquery自动完成未在文本框中显示所选值

2 个答案: