2010-03-23 71 views
7

當用戶開始輸入的搜索框,建議頁返回從匹配的非農產品市場準入的所有集合,再加上其他的最新數據項。添加一個鏈接到一個jQueryUI的自動完成項目

我想顯示該項目(以及它的圖像),並鏈接到「看到這個集合中的所有項目」。

我可以做的(大部分)與下面的代碼:

$('#search').autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: suggesturl, 
      dataType: 'json', 
      data: request, 
      success: function (data) { 
       response(data.map(function (value) { 
        return { 
         'label': '<img src="' + value.thumbsmall + '" />' + value.name + '<a href="/">More items from this collection...</a>', 
         'value': value.fullname 
        }; 
       })); 
      } 
     }); 
    }, 
    minLength: 3 
}) 

的問題是,雖然鏈接出現在框中,當它被點擊它就會被忽略,並且默認select動作執行(該項目的value被放入文本框)。

回答

6

好像你有幾個選項。首先,您可以使用自動完成初始值設定項上的選擇選項來指定您自己的選擇操作。

$(selector).autocomplete({ 
    source: ... , 
    select: function(value, data){ 
      if (typeof data == "undefined") { 
       emitMessage('You selected: ' + value + "<br/>"); 
      } else { 
       emitMessage('You selected: ' + data.item.value + "<br/>"); 
      } 
    } 
}); 

如果這還不夠,因爲某些原因,那麼你就可以渲染自動完成列表中選擇自己的內容,並以這種方式,因爲你需要得到儘可能多的控制。
你做到這一點的猴子修補_renderItem FN,這是自動完成的調用來呈現列表中的每個項目的內容。檢查this answer如何做到這一點。它適用於v1.8rc3。

我想在_renderItem你可以呈現一個可點擊的<span>,並附上你喜歡的單擊事件的任何邏輯。

如果您走這條路線,您可能需要關閉默認點擊操作。我想自動完成使用的<a>爲提供點擊事件的元素。在這種情況下,您需要取消設置該點擊處理程序。

+0

嗨,你能不能看我的問題嗎?你的回答似乎相關,但我不知道如何實施它。 http://stackoverflow.com/questions/6577761/how-can-i-make-this-link-clickable-in-jquery-ui-autocomplete-uncaught-typeerror – noli 2011-07-05 04:25:50

相關問題