自定義jQuery的自動完成結果

我使用jQuery自動完成與遠程數據源自定義jQuery的自動完成結果

$("input#searchbar").autocomplete({ 
     source: function(request, response) { 
      $.ajax({type: "post", 
      mode: "abort", 
      dataType: 'json', 
      url: 'index.php/ajax/autosuggest', 
      data: { term: $("#searchbar").val()}, 
      success: function(data) { 

       response(data); 
      } 
     }); 
    }, 
    select: function(e, ui) { 
     //Refresh pros 
     if (map){ 
      mouseUpOnTheMap(); 
     } 
    } 
});

它的作品真的很好。當我鍵入「a」時，會列出以該列表開頭的活動列表（從數據庫提取）。我想要做的是在結果中添加一個自定義參數（活動的ID）。

因爲當用戶選擇稍後的活動，我將不得不「重新做」一個sql搜索，獲得該活動的ID ...

那麼，有沒有辦法，包括在活動ID從自動完成中返回JSON？

感謝

來源

2011-06-04 Fazoulette

你將在哪裏保存該ID？客戶端或DB – zod 2011-06-04 13:14:30

如果您的index.php/AJAX /自動提示頁面返回JSON數組與「標籤」和「值」（而不是字符串數組），則在jQuery UI的自動完成的兩個鍵對象插件，使用「label」鍵顯示在自動完成列表中，但實際上會爲您提供在select事件中選擇的JSON對象。然後你可以引用對象的值。

$("input#searchbar").autocomplete({ 
     source: function(request, response) { 
      $.ajax({type: "post", 
      mode: "abort", 
      dataType: 'json', 
      url: 'index.php/ajax/autosuggest', 
      data: { term: $("#searchbar").val()}, 
      success: function(data) { 
       //data assumes [{label: "result 1", value: 1}, {label: "result 2", value: 2}]; 
       response(data); 
      } 
     }); 
    }, 
    select: function(e, ui) { 
     var selectedItem = ui.item; 
     var id = selectedItem.value; 
     var label = selectedItem.label; 

     //Refresh pros 
     if (map){ 
      mouseUpOnTheMap(); 
     } 
    } 
});

我沒有測試編輯方針，只是在這裏找到：http://www.petefreitag.com/item/756.cfm

來源

2011-06-04 13:29:01 WesleyJohnson

實際上，在重新閱讀該頁面後，可能會涉及更多的工作。我的這個跳槍不好......現在還早。 – WesleyJohnson 2011-06-04 13:32:10

韋斯利描述的方法是什麼，我們目前正在使用爲好。

通過返回我們的JSON對象，我們都能夠抓住該ID處理它在我們想要的方式（在我們的情況下，將其存儲在一個隱藏的輸入）都label和id，而標籤被用來展示我們的選擇記錄的用戶。

基本例如：http://jsfiddle.net/NLK5p/4/

來源

2011-06-22 22:57:29

哪個數據源是您使用？我強烈建議freebase它是一個擁有超過12百萬聲音的免費數據庫，它爲大多數雜誌（作業，體育，演員，電影或任何你想要的）領域的自我暗示（包括js功能）提供web服務。 ..不是每個人都知道它，但谷歌去年購買了該項目（它仍然可用和免費），所以它應該是一個有前途的數據源Web服務。

來源

2011-06-23 14:04:02

自定義jQuery的自動完成結果

回答

相關問題