0

我正在使用自动完成，其中搜索的每个变量都有 3 个属性（标签、id、值）。我希望根据该选择的 id 将用户选择的值传递给四个隐藏字段之一。

js文件

var destinations= [
        {value: "25",label: "USA",id: "1"},
        {value: "26",label: "Midwest",id: "2"},
        {value: "27",label: "Colorado",id: "3"},
        {value: "28",label: "Denver",id: "4"}
        ];

$(document).ready(function() {
    $( "#destinations" ).autocomplete({
        minLength: 1,
        source: destinations,

        select: function( event, ui ) {
            $('#destinations').val( ui.item.label );
            $('#destinationid').val(ui.item.id);
            $('#destinationtype').val(ui.item.value);
            if ($("#destinationid").val() == 1){
            $("#results1").text($('#type1').val());
        }
        if ($("#destinationid").val() == 2){
            $("#results2").text($('#type2').val());
        }
        if ($("#destinationid").val() == 3){
            $("#results3").text($('#type3').val());
        }
        if ($("#destinationid").val() == 4){
            $("#results4").text($('#type4').val());
        }
    },

        focus: function( event, ui ) {
            $("#destinations").val( ui.item.label );
            return false;
        }
    });

});

在我的 html 中，我有以下内容：（出于测试目的，我没有隐藏它们。）

<input id="destinations" /> 
<input type="hidden" input id="type1" /> 
<input type="hidden" input id="type2" />
<input type="hidden" input id="type3" />
<input type="hidden" input id="type4" />

自动选择很好地拉动标签，但是当我选择一个时，它会将选择更改为其值而不是保留标签。它也没有将值放在相应的文本框中，而只是将值留在第一个文本框中。

任何建议，将不胜感激。

4

4 回答 4

1 
var destinations= [
        {value: "25",label: "USA",id: "1"},
        {value: "26",label: "Midwest",id: "2"},
        {value: "27",label: "Colorado",id: "3"},
        {value: "28",label: "Denver",id: "4"}
        ];



$(document).ready(function() {
    $( "#destinations" ).autocomplete({
        minLength: 1,
        source: destinations,

        select: function( event, ui ) {
                $('#destinations').val( ui.item.label );
                var destinationId = u.item.id;
                $('#destinationvalue').val(ui.item.value);
                $('#type' + destinationId).val(ui.item.value);
        },

        focus: function( event, ui ) {
            $("#destinations").val( ui.item.label );
            return false;
        }
    });

});
于 2012-08-25T21:16:39.600 回答
0

从您的 select 语句中返回 false，否则 jquery UI 的默认选择将在您之后运行。

工作代码演示：http: //jsfiddle.net/FCw9f/

于 2012-08-25T22:50:19.830 回答
0 
<input type="hidden" input id="type1" />

你的输入标签中有一个额外的“输入”......我不确定你的意思是它是故意用于测试还是什么，但这肯定会导致一些不需要的行为。

于 2012-08-25T21:59:44.650 回答
0

多亏杰森为我指出了正确的方向，我才能够弄清楚。它还不完美，但它正在做我想要的。http://jsfiddle.net/pkracer/RADGs/

于 2012-08-26T16:24:46.663 回答