带有item和id的jQuery UI自动完成

Question

我有以下脚本,它与1维数组一起使用.是否可以使用二维数组？然后,无论选择哪个项目,通过单击页面上的第二个按钮,都应显示选择的项目的ID.

这是具有1维数组的脚本:

var $local_source = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];
$("#txtAllowSearch").autocomplete({
    source: $local_source
});

这是用于检查id的按钮的脚本,该脚本不完整:

$('#button').click(function() {
    // alert($("#txtAllowSearch").someone_get_id_of_selected_item);
});

Answer 1

您需要使用ui.item.label(文本)和ui.item.value(id)属性

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

[编辑]你还问过如何创建多维数组......

您应该能够像这样创建数组:

var $local_source = [[0,"c++"], [1,"java"], [2,"php"], [3,"coldfusion"], 
                     [4,"javascript"], [5,"asp"], [6,"ruby"]];

在此处阅读有关如何使用多维数组的更多信息:http://www.javascriptkit.com/javatutors/literal-notation2.shtml

Answer 2

从jQuery自动完成插件的Overview选项卡:

本地数据可以是一个简单的字符串数组,也可以包含数组中每个项目的对象,带有标签或值属性或两者.label属性显示在建议菜单中.用户从菜单中选择了某些内容后,该值将插入到input元素中.如果仅指定了一个属性,则它将用于两者,例如.如果仅提供value-properties,则该值也将用作标签.

所以你的"二维"数组看起来像:

var $local_source = [{
    value: 1,
    label: "c++"
}, {
    value: 2,
    label: "java"
}, {
    value: 3,
    label: "php"
}, {
    value: 4,
    label: "coldfusion"
}, {
    value: 5,
    label: "javascript"
}, {
    value: 6,
    label: "asp"
}, {
    value: 7,
    label: "ruby"
}];

你可以在里面访问标签和值的属性focus,并select通过事件ui参数使用ui.item.label和ui.item.value.

编辑

似乎您必须"取消"焦点并选择事件,以便它不会将ID号放在文本框中.这样做时,您可以将值复制到隐藏变量中.这是一个例子.

Answer 3

我的代码仅在我向select函数添加'return false'时才有效.如果没有这个,输入在select函数内部设置了正确的值,然后在select函数结束后设置为id值.返回false解决了这个问题.

$('#sistema_select').autocomplete({

    minLength: 3,
    source: <?php echo $lista_sistemas;?> ,
    select: function (event, ui) {
         $('#sistema_select').val(ui.item.label); // display the selected text
         $('#sistema_select_id').val(ui.item.value); // save selected id to hidden input
         return false;
     },
    change: function( event, ui ) {
        $( "#sistema_select_id" ).val( ui.item? ui.item.value : 0 );
    } 
});

另外,我在更改事件中添加了一个函数,因为如果用户在输入中写入内容或者在选择一个项目后删除了项目标签的一部分,我需要更新隐藏字段以便我不能获得错误的(过时的)身份证.例如,如果我的来源是:

var $local_source = [
       {value: 1,  label: "c++"}, 
       {value: 2,  label: "java"}]

并且用户输入ja并选择带有自动完成的'java'选项,我将值2存储在隐藏字段中.如果用户从'java'中删除一个字母,例如在输入字段中以'jva'结尾,我无法将id 2传递给我的代码,因为用户更改了该值.在这种情况下,我将id设置为0.

Answer 4

只想分享我最终的成果,以防它能够帮助别人.或者根据上面的Paty Lustosa的回答,请允许我添加从该站点派生的另一种方法,他使用ajax方法作为源方法

http://salman-w.blogspot.ca/2013/12/jquery-ui-autocomplete-examples.html#example-3

踢球者是你的php脚本(下面的listing.php)生成的"字符串"或json格式,它导出要在自动完成字段中显示的结果集应该遵循以下内容:

    {"list":[
     {"value": 1, "label": "abc"},
     {"value": 2, "label": "def"},
     {"value": 3, "label": "ghi"}
    ]}

然后在自动完成方法的源部分:

    source: function(request, response) {
        $.getJSON("listing.php", {
            term: request.term
        }, function(data) {                     
            var array = data.error ? [] : $.map(data.list, function(m) {
                return {
                    label: m.label,
                    value: m.value
                };
            });
            response(array);
        });
    },
    select: function (event, ui) {
        $("#autocomplete_field").val(ui.item.label); // display the selected text
        $("#field_id").val(ui.item.value); // save selected id to hidden input
        return false;
    }

希望这有助于......一切顺利!

Answer 5

假设源数组中的对象具有id属性...

var $local_source = [
    { id: 1, value: "c++" },
    { id: 2, value: "java" },
    { id: 3, value: "php" },
    { id: 4, value: "coldfusion" },
    { id: 5, value: "javascript" },
    { id: 6, value: "asp" },
    { id: 7, value: "ruby" }];

掌握当前实例并检查其selectedItem属性将使您能够检索当前选择的项目的属性。在这种情况下，提醒选定项目的ID。

$('#button').click(function() {
    alert($("#txtAllowSearch").autocomplete("instance").selectedItem.id;
});