jQuery自动完成选择：功能不起作用

Posted 2021-03-27

这看起来很简单，但我似乎无法让它工作：

var options, a;
jQuery(function(){
  options = { 
  serviceUrl:'ajax/parts_by_partno.php', 
  select: function(event, ui) { 
    $("#hiddenId").val(ui.item.id); 
    }
  };
  a = $('#fieldWithData').autocomplete(options);
});

从自动完成列表中选择项目后，我希望#hiddenId将其值更改为所选项目的ID：

$("#hiddenId").val(ui.item.id); 

我甚至试图将#hiddenId更改为静态内容，如下所示：

$("#hiddenId").val('test'); 

没有改变。我究竟做错了什么？

答案

看看这段代码..希望它能帮助你

$('#selector').autocomplete({
    source: url,
    select: function (event, ui) {
        $("#txtAllowSearch").val(ui.item.label); // display the selected text
        $("#txtAllowSearchID").val(ui.item.value); // save selected id to hidden input
    }
});

$('#button').click(function() {
    alert($("#txtAllowSearchID").val(); // get the id from the hidden input
}); 

另一答案

这是关于如何使用自动完成模块的full blog entry

基本上，您需要在更改选择值时添加回调，如下所示：

 select: function(e, ui) {  

        //create formatted friend  
        var friend = ui.item.value,  
            span = $("<span>").text(friend),  
            a = $("<a>").addClass("remove").attr({  
                href: "javascript:",  
                title: "Remove " + friend  
            }).text("x").appendTo(span);  

            //add friend to friend div  
            span.insertBefore("#to");  
        },  

        //define select handler  
        change: function() {  

            //prevent 'to' field being updated and correct position  
            $("#to").val("").css("top", 2);  
        }  
    });