jquery自动完成未在文本框中显示选定的值答案

【问题标题】：jquery autocomplete not showing the selected value in textboxjquery自动完成未在文本框中显示选定的值
【发布时间】：2014-02-26 12:48:55
【问题描述】：

我正在使用 jquery 自动完成功能创建搜索栏。

这是我的自动完成代码：

<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

我的问题是，当我选择任何自动建议选项时，文本框只显示值而不显示标签。

例如在上面的例子中，如果我选择shirts，文本框会显示2results。但是在我的第二个 ajax 函数中传递的参数是正确的，即衬衫

谁能提出解决方案？

【问题讨论】：

标签： jquery jquery-ui jquery-ui-autocomplete

【解决方案1】：

我认为你需要取消select事件中的默认动作：

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

如果不取消选择事件，jQuery UI 会用项目的值覆盖文本框文本。

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

【讨论】：

您的代码在我选择任何一个自动建议时有效，即当我点击任何自动建议时，文本框会显示标签。但是当我使用箭头键时，它仍然显示值....
方向键触发焦点事件，所以你也需要取消它。
是的，我已经做到了...发布了答案..感谢您的帮助

【解决方案2】：

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

我已按照 Salman 的建议在选择事件中添加了 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>

【讨论】：