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

【问题标题】：jQuery Autocomplete select: function not workingjQuery自动完成选择：功能不起作用
【发布时间】：2012-03-14 04:16:35
【问题描述】：

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

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');

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

【问题讨论】：

您是否收到任何 javascript 错误？你签入了 firebug 或 chrome 开发工具
萤火虫没有错误。自动完成功能正常，但#hiddenId 没有改变。

标签： jquery jquery-autocomplete

【解决方案1】：

看看这个代码..希望它会帮助你

$('#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
});

【讨论】：

Firebug 给我一个错误说 $('#fieldWithData').autocomplete 不是一个函数。

【解决方案2】：

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

Basically, you need to add a callback when the select value is changed, like this:

 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);  
        }  
    });

【讨论】：