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

大家好

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

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

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

使用回调

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

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

来自他们的帮助文档

回拨

使用可选回调函数时，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自动完成（此组件基于此）

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

（来自演示页面上工作示例的代码）

如果我使用

$("#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='  
                            }

                        });

$("#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的值为

^^^^^^^^^^^^^^^^^^^^^[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

---

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

@shaggylnjun感谢您的回复，但我使用的是自动完成。@shaggylnjun这里我得到的名称值为undefinedQ Rohan，我得到的$a.text（）值为[object object]确定您需要做的是。进入你的页面，打开开发者工具，在谷歌浏览器中按f12。并在回调事件中添加断点，然后输入一个值并检查结果对象，以查看是否可以找到文本值存储在其中的变量。或者，查看此页面的来源。如果您只需要文本值，为什么还要将该值传递到前端。@罗汉：谢谢你的建议。使用$a.text（）我得到了值。再次感谢。

$("#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. 
                        }

^^^^^^^^^^^^^^^^^^^^^^^^^^undefined 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 $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
                            }


                        });