Question

我想在下面的代码片段中只显示自动建议列表标签文本不值，当我们键入y drop-list打开并显示yahoo时我在列表上显示yahoo它在文本框中显示yahoo URL不仅yahoo我只想显示雅虎，谷歌或标签中的其他东西没有价值

＆＃13;

var source = [ { value: "https://www.yahoo.com/",
                 label: "Yahoo"
               },
               { value: "https://www.google.com.pk",
                 label: "Google"
               }
             ];
			 $("input#autocomplete").autocomplete({
        source: source,
        select: function( event, ui ) { 
            window.location.href = ui.item.value;
        }
    });

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>

<input id="autocomplete" />

＆＃13;

Answer 1

实际上来自您的来源的label字段将显示在选择或焦点上的输入字段上，但是当您使用select:function()回调时，此行为将被覆盖，value将更新为文本字段。

如何解决：

防止select回调的默认行为将value更新为文本字段。
通过设置文本字段的.val()手动更新文本字段的值。

JQUERY CODE：

$(function () {
  var source = [{
    label: "Yahoo",
    value: "https://www.yahoo.com/"

}, {
    label: "Google",
    value: "https://www.google.com.pk"

}];
$("input#autocomplete").autocomplete({
    source: source,
    select: function (event, ui) {
        event.preventDefault(); //prevent default beahaviour
        $(this).val(ui.item.label); //update the value manually
        window.location.href = ui.item.value;
    },
    focus: function (event, ui) {
        event.preventDefault();
        $(this).val(ui.item.label);
    }
  });
});

Live Demo @ JSFiddle

自定义自动填充功能

覆盖自动填充menu呈现功能_renderMenu = function (ul, items) { ... }
过滤每个menu item并仅渲染以搜索文本开头的匹配菜单项（._renderItem(ul, item);）。
如果列表中没有项目，请停用list（删除边框），并在list中有项目时恢复。

Custom autocomplete menu rendering @ JSFiddle

注意：我也阻止了焦点事件的默认行为，因为它还会将value更新为文本字段。

如何显示列表标签而不是值

1 个答案: