26

jQuery UI 自动完成的一个潜在的简单问题让我很难过。我的来源是

var ac = [
    {
        label: "One Thing",
        value: "One-Thing"
    },
    {
        label: "Two Thing",
        value: "Two-Thing"
    },      
]

我正在调用小部件

$(function() {
    $( "#search" ).autocomplete({
        source: PK.getAutocompleteSource(),
        focus: function( event, ui ) {
            $("#search").val(ui.item.label);
            return false;  
        },
        select: function( event, ui ) {
            $("#search").val(ui.item.label);
            PK.render(ui.item.value);
        }
    });
});

一切正常。当我在#search输入字段中键入时，匹配的标签会显示在下拉列表中，并且当我select执行正确的搜索时。当我使用箭头键（或鼠标）在下拉列表中选择不同的项目时，小部件甚至会label在输入字段中显示 。#search除了，我一按回车，小部件就会用 .而不是. 填充#search输入字段。因此该字段显示One-Thing而不是One Thing。valuelabel

我该如何纠正？当然，我期待的是更合理的行为，不是吗？

4

3 回答 3

48

如果您希望标签成为您的价值，只需将来源设为

var ac = ["One Thing", "Two Thing"]

或者，select自动完成默认操作的方法是将value对象（如果指定）作为输入的值。您也可以放入event.preventDefault()select 函数，它将标签作为值（如您所见）

select: function( event, ui ) {
        event.preventDefault();
        $("#search").val(ui.item.label);
        PK.render(ui.item.value);
    }
于 2013-06-29T01:18:18.630 回答
20

如果您希望您的标签成为 onFocus 和 onSelect 文本框中的值，请使用以下代码：

select: function(event, ui) { 
        $('#hiddenid').val(ui.item.value); 
        event.preventDefault(); 
        $("#search").val(ui.item.label); },

focus: function(event, ui) { 
       event.preventDefault(); 
       $("#search").val(ui.item.label);}

我错过了 onFocus 事件（仅设置 onSelect 事件）。因此，该值继续显示在文本输入中。

于 2014-05-29T15:37:35.197 回答
6

我仍然对显示值的箭头键有问题。所以我实际上发现最好将值和标签都分配给标签，然后将值放在数据的第三个属性上。例如，让我们把它放在 id 上。

var ac = [
    {
        label: "One Thing",
        value: "One Thing",
        id: "One-Thing",
    },
    {
        label: "Two Thing",
        value: "Two Thing",
        id: "Two-Thing"
    },      
]

那么当你使用select事件的时候，就可以从ui中获取id：

select: function( event, ui ) {
    PK.render(ui.item.id);
}
于 2015-02-04T18:09:19.530 回答