自动完成将值而不是标签应用于文本框

Posted 2023-03-05

【中文标题】自动完成将值而不是标签应用于文本框

【英文标题】：Autocomplete applying value not label to textbox

【发布时间】：2011-11-30 08:49:28

【问题描述】：

我在尝试让自动完成功能正常工作时遇到了麻烦。

在我看来一切都很好，但是......

<script>
$(function () 
    $("#customer-search").autocomplete(
        source: 'Customer/GetCustomerByName',
        minLength: 3,
        select: function (event, ui) 
            $("#customer-search").val(ui.item.label);
            $("#selected-customer").val(ui.item.label);
        
    );
);
</script>
<div>
<input id="customer-search" />
 </div>
@html.Hidden("selected-customer")

但是，当我从下拉列表中选择一个项目时，该值将应用于文本框而不是标签。

我做错了什么？

如果我使用 firebug 查看源代码，我可以看到我的隐藏字段正在正确更新。

【问题讨论】：

您在 Firebug 的 JSON 响应中看到了什么？

["label":"Tom Smith","value":"1234","label":"Tommy Smith","value":"12321"]

见：***.com/questions/6716266/…

【参考方案1】：

select 事件的默认行为是将input 更新为ui.item.value。此代码在您的事件处理程序之后运行。

只需返回false 或调用event.preventDefault() 即可防止这种情况发生。我还建议对focus 事件执行类似的操作，以防止在用户将鼠标悬停在选项上时将ui.item.value 放置在input 中：

$("#customer-search").autocomplete(
    /* snip */
    select: function(event, ui) 
        event.preventDefault();
        $("#customer-search").val(ui.item.label);
        $("#selected-customer").val(ui.item.label);
    ,
    focus: function(event, ui) 
        event.preventDefault();
        $("#customer-search").val(ui.item.label);
    
);

示例： http://jsfiddle.net/andrewwhitaker/LCv8L/

【讨论】：

非常有用！你不是说$("#selected-customer").val(ui.item.value);

@juanignaciosl：不——该代码旨在用label而不是value更新搜索框。

我将值存储在数据库而不是标签，所以下次我想根据值设置标签。这样做的方法是什么？

嘿，尝试做类似的事情，但把所有东西都放在focus而不是select。问题是设置了item.value 而不是item.label。无论如何要规避这个？ lookup.autocomplete( source: data, focus: function(event, ui) event.preventDefault(); $(this).val(ui.item.label) status.text(ui.item.value) submitted.text(ui.item.submitted) comments.html(ui.item.comments) )

这里也一样，我想显示标签，发布值。我确实设法将涉及隐藏元素的杂物拼凑在一起（类似于下面@Yang Zhang 的回答，但在这一点上，滚动我自己的自动完成功能似乎是最不优雅的方法。

【参考方案2】：

只想添加它，而不是通过 select 和 focus 中的“id”引用输入元素您可以使用 this 选择器的回调函数，例如：

$(this).val(ui.item.label);

当您为多个元素分配自动完成时很有用，即按类：

$(".className").autocomplete(
...
    focus: function(event, ui) 
        event.preventDefault();
        $(this).val(ui.item.label);
    
);

【参考方案3】：

就我而言，我需要在隐藏输入中记录另一个字段“id”。所以我在 ajax 调用返回的数据中添加了另一个字段。

label:"Name", value:"Value", id:"1"

并在列表底部添加了“新建”链接。点击“新建”后，会弹出一个模式，您可以从那里创建新项目。

$('#vendorName').autocomplete
    (
        
            source: "/Vendors/Search",
            minLength: 2,
            response: function (event, ui)
            
                ui.content.push
                (
                    label: 'Add a new Name',
                    value: 'Add a new Name'
                );
            ,
            select: function (event, ui)
            
                $('#vendorId').val(ui.item.id);
            ,
            open: function (event, ui)
            
                var createNewVendor = function () 
                    alert("Create new");
                
                $(".ui-autocomplete").find("a").last().attr('data-toggle', 'modal').addClass('highLight');
                $(".ui-autocomplete").find("a").last().attr('href', '#modal-form').addClass('highLight');
            
        
    );

我认为重点是您可以添加任何额外的数据字段，而不仅仅是“标签”和“值”。

我使用引导模式，它可以如下：

<div id="modal-form" class="modal fade" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div class="row">

            </div>
        </div>
    </div>
</div>