获取列表项的名称在jquery中的自动完成中单击

Question

大家好，

在我的应用程序中，我使用自动完成，我列表为

        <p>
            <input type="text" id="searchField" placeholder="Categories">
            <ul id="suggestions" data-role="listview" data-inset="true"></ul>
        </p>

我有一个数组名称myArray并使用自动完成：

$("#searchField").autocomplete(
                        {
                            target: $('#suggestions'),
                            source: myArray ,
                            link: 'target.html?term=',
                            minLength:0
                        });

现在我想获取我点击的列表项名称，并在target.html文件中使用该变量。 怎么做到的？ 提前致谢。

Answer 1

来自他们的帮助文档。

打回来

使用可选的回调函数时，autoComplete只会执行回调中的代码。 click事件对象被传递到回调函数，用于访问选择中包含的信息。 这是一个用例：

$("#searchField").autocomplete("update", {
    source: [ "foo", "bar", "baz" ],
    minLength: 3,
    callback: function(e) {
        var $a = $(e.currentTarget); // access the selected item
        $('#searchField').val($a.text()); // place the value of the selection into the search box
        $("#searchField").autocomplete('clear'); // clear the listview
    }
});

选项1本部分允许您访问文本字段

$('#searchField').val($a.text()); // or $a.value()

所以在回调事件中做这样的事情

window.location.replace("http://stackoverflow.com?target=" + $a.text());

选项2看起来他们希望结果集采用这种格式（文本和值），所以如果你需要其他值，你需要求助于jquery自动完成（这个组件所基于的）

 $('#some_id').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: 'some_url',
                        dataType: "json",
                        data: {
                            filter: request.term
                        },
                        success: function (data) {
                            response($.map(eval(data), function (item) {
                                return {
                                    label: item.Text,
                                    value: item.Value,
                                    extra_value: item.Extra_Value
                                }
                            }));
                        }
                    })
                },
                maxLength: 2,
                select: function (event, ui) {
                    $("#Some_id2").attr('value', ui.item.extra_value);
                }
            });

更新aka选项3从他们的演示代码中，如果您只需要文本值，并且不需要ID（就像您的情况一样），只需更改源格式即可。 而不是从服务器返回JSON结果返回一个字符串数组，或将JSON结果转换为一个字符串数组，这就像你喜欢的那样

（他们的演示页面上的工作示例代码）

var availableTags = ['24', 'about me',... , 'XUIJS'];

    $("#searchField").autocomplete({
        target: $('#suggestions'),
        source: availableTags,
        link: 'target.html?term=',
        minLength: 1,
        matchFromStart: false
    });

Answer 2

使用回调。

$("#searchField").autocomplete(
                        {
                            target: $('#suggestions'),
                            source: myArray ,
                            link: 'javascript:void();',
                            minLength:0,
                            callback: function(e){

                                var name = $(e.target).attr('name');
           //This function will be called when one of the suggestions is clicked according to documentation
                                window.location = 'target.html?term='  // This line might need some tweaking. 
                            }
                        });

代码未经过测试，您可能需要逐步调试此代码。

Answer 3

如果我使用

$("#searchField").autocomplete(
                        {
                            icon: 'arrow-l', 
                            target: $('#suggestions'),
                            source: stockArray,
                            link: 'target.html?term=',
                            minLength:0,
                            callback: function(e)
                            {

                                var nameq = $(e.currentTarget); 
                                console.log("^^^^^^^^^^^^^^^^^^^^^"+nameq);
                                //This function will be called when one of the suggestions is clicked according to documentation
                                window.location = 'target.html?term='  
                            }

                        });

我得到nameq的价值

^^^^^^^^^^^^^^^^^^^^^[object Object] at file:///android_asset/www/index.html:115

如果我使用

$("#searchField").autocomplete(
                        {
                            icon: 'arrow-l', 
                            target: $('#suggestions'),
                            source: stockArray,
                            link: 'target.html?term=',
                            minLength:0,
                            callback: function(e){

                             var nameq = $(e.target).attr('name');

                             console.log("^^^^^^^^^^^^^^^^^^^^^^^^^^"+nameq);
                            //This function will be called when one of the suggestions is clicked according to documentation
                            window.location = 'target.html?term='  // This line might need some tweaking. 
                        }

我得到nameq的价值：

^^^^^^^^^^^^^^^^^^^^^^^^^^undefined at file:///android_asset/www/index.html:115

Answer 4

$("#searchField").autocomplete(
                        {
                            icon: 'arrow-l', 
                            target: $('#suggestions'),
                            source: stockArray,
                            link: 'target.html?term=',
                            minLength:0,
                            callback: function(e)
                            {

                                var $a = $(e.currentTarget); // access the selected item
                                console.log("###################!!###"+$a.text());
                                $('#searchField').val($a.text()); // place the value of the selection into the search box
                                $("#searchField").autocomplete('clear'); // clear the listview
                            }


                        });

现在使用$ a.text（）我得到选定的项目值。