Question

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

js file

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" />

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

任何建议都将不胜感激。

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

});

Answer 2

<input type="hidden" input id="type1" />

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

Answer 3

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

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

Answer 4

我能够弄明白，因为杰森指出了我正确的方向。它还不完美，但它做我想做的事。 http://jsfiddle.net/pkracer/RADGs/

如果javascript需要声明帮助

4 个答案: