获取列表项的点击名称

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

从他们的帮助文档。

回调

使用可选的回调函数自动完成只会执行回调中发现的代码。点击事件对象被传递到回调函数中，用于访问选择中包含的信息。这里有一个用例：

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

OPTION 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); 
       } 
      }); 

UPDATE又名OPTION 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（）我得到所选项目的价值。