使用jquery自定义自动完成功能

时间:2014-07-15 07:27:46

标签: javascript jquery

我正在研究jquery自动完成自定义数据和显示。我想在textbox中的keypress上显示一些静态下拉列表。当用户选择我要将其添加到文本框的列表项时。

我测试的代码是

 $('#uinput').keyup(function() {
        var val = $('#uinput').val();
        if(val.length>1) {  // check length

                // handle successful DWR response
                //alert(data);

                var b=[{value: "jquery-ui",
                    label: "jQuery UI",}];
                $('#uinput').autocomplete({source:b,

                      select: function( event, ui ) {
                          $( "#uinput" ).val( ui.item.label+"="+document.getElementById('uinput').value  );


                          return false;
                        }

                }).data("autocomplete")._renderItem = function( ul, item ) {
                    return $( "<li>" )
                    .data('item.autocomplete', item)
                    .append( "<a>" + item.label + "=" + document.getElementById('uinput').value + "</a>" )
                    .appendTo( ul );
                };

        } else {
            $('#uinput').autocomplete([]);  // clean
        }
    });

参考我想做的事 custom autocomplete

1 个答案:

答案 0 :(得分:0)

我不确定你要完成什么,但我想我已经把这个我认为可以帮助你的例子放在一起

https://jsfiddle.net/mgxnxhs8/5/

这是我的javascript

$(function () {
    var availableTags = [{
        label: "jQuery 1.9.1",
        value: "http://code.jquery.com/jquery-1.9.1.js",
    }, {
        label: "jQuery 2.1.4",
        value: "http://code.jquery.com/jquery-2.1.4.js",
    }];
    $('#uinput').autocomplete({
        source: availableTags,
        minLength: 0,
        select: function (event, ui) {
            $('#uoutput').val(ui.item.value);
            return false;
        }
    }).focus(function () {
        $(this).autocomplete("search");
    });
});

当您输入文本框并显示标签的“标签”键时,下拉列表会打开。在Select()上,它将另一个文本框的值设置为所选标记的“value”键。

让我知道我错过了什么。希望这有帮助