獲取列表項的點擊名稱

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（）我得到所選項目的價值。