Question

我有两个文本框。

<input type="text" id="text1"> <input type="text" id="text2">

我希望通过使用相同的数组来自动完成它们，如：

var data = [
    { value : "1" ,   label1 : "Matt",    label2 : "0101 Matt" },
    { value : "2" ,   label1 : "John",    label2 : "0203 John" },
    { value : "3" ,   label1 : "Chris",   label2 : "0102 Chris" },
    { value : "4" ,   label1 : "Sam",     label2 : "0401 Sam" },
    { value : "5" ,   label1 : "George",  label2 : "0302 George" },
    { value : "6" ,   label1 : "Amy",     label2 : "0205 Amy" },
];

当我关注label1文本框和text1字段时，我需要数组中的label2字段作为自动填充的主要标签。还需要结果列表按字母顺序排序。

我认为这与添加一些代码以打开自动完成的事件或_renderItem扩展有关，但到目前为止还无法解决。

Answer 1

这是您的解决方案

<强> CODE

 $(document).ready(function(e){
        var data = [
            { value : "1" ,   label1 : "Matt",    label2 : "0101 Matt" },
            { value : "2" ,   label1 : "John",    label2 : "0203 John" },
            { value : "3" ,   label1 : "Chris",   label2 : "0102 Chris" },
            { value : "4" ,   label1 : "Sam",     label2 : "0401 Sam" },
            { value : "5" ,   label1 : "George",  label2 : "0302 George" },
            { value : "6" ,   label1 : "Amy",     label2 : "0205 Amy" },
        ];

        $('#text1').focusin(function(){
            $(this).siblings('.au').html('')
            $nwArr = [];
            for($i=0;$i<data.length;$i++){
                $nwArr.push(data[$i].label1)
                $nwArr.sort(); 
            }
            for($i=0;$i<$nwArr.length;$i++){
                $(this).siblings('.au').append('<div>'+$nwArr[$i]+'</div>')
            }

        })
        $('#text2').focusin(function(){
            $(this).siblings('.au').html('')
            $nwArr = [];
            for($i=0;$i<data.length;$i++){
                $nwArr.push(data[$i].label2)
                $nwArr.sort(); 
            }
            for($i=0;$i<$nwArr.length;$i++){
                $(this).siblings('.au').append('<div>'+$nwArr[$i]+'</div>')
            }

        })
        $('#text1,#text2').focusout(function(){
            $(this).siblings('.au').html('')
        })
    })

小提琴http://jsfiddle.net/krunalp1993/5jtU7/

希望它可以帮助你：）

jquery通过使用相同的数据数组自动完成2个文本框并相应地排序

1 个答案: