附上事件的jquery自動完成

我有這樣的：附上事件的jquery自動完成

$("#term").autocomplete({ 
    minLength: 2, 
    source: function(request, response) { 
    $.ajax({ 
     url: 'http://query.yahooapis.com/v1/public/yql', 
     dataType: 'JSONP', 
     data: { 
     format: 'json', 
     q: 'select * from xml where url="http://google.com/complete/search?output=toolbar&q=' + escape(request.term) + '"' 
     }, 
     success: function(data) { 
     response($.map(data.query.results.toplevel.CompleteSuggestion, function(item) { 
      return { label: item.suggestion.data, value: item.suggestion.data }; 
     })); 
     } 
    }); 
    } 
});

所以自動完成有一個內置在keyup事件。但是如何在點擊某個東西時給出相同的'函數（請求，響應）'（在這種情況下= ul li）？如何附加onclick事件來完成自動填充？

這裏是真人版：JsBin

來源

2012-01-26 Youss

你是什麼意思「一下東西的時候」。點擊什麼？完全外部元素或自動完成的一部分？ –

自動完成功能將json結果作爲ul，li在元素下以'term'作爲id。所以Youss想知道如何檢索該選擇的價值和使用它（我認爲） –

Didier Ghys嗨，我的意思是單擊列表項目會給出另一個搜索/結果（按該項目的值） – Youss

你的問題不是很清楚。據我瞭解，該插件提供了一種「搜索」方法，以編程方式啓動搜索，就像直接在輸入字段中輸入內容一樣。

使用如下：

$('#term').autocomplete('search', 'Napoleon');

如果你想一個元素在菜單中選擇每次開始一個新的建議，你可以使用select事件。

$("#term").autocomplete({ 
    ..., 
    select: function(e, ui) { 
     $('#term').val(ui.item.value).autocomplete('search', ui.item.value); 
    } 
});

屬性ui.item是被選擇的數據項：當選擇了推薦列表，或者通過cliking一個項目，或具有鍵盤的元件則trigerred。

我已經設置了一個演示，其中cliking一個按鈕，任期聯想搜索到「數據 - 」屬性：

DEMO

延伸閱讀：

"search" method of autocomplete

來源

2012-01-26 10:48:04

嗨，感謝您的重播。我想我正在尋找一種方法來使用'select'事件，它將把列表項的值放入輸入中，而不是關閉它必須再次請求的ul li，這將導致不同的（xml）列表[link ] http://jqueryui.com/demosplete/#event-select [鏈接] – Youss

自動完成插件絕對沒有這樣工作，所以...祝你好運。在用戶體驗和可用性方面也沒有多大意義。請記住，人們喜歡使用他們熟悉的東西。 –

我有點在我的片段與丟失）和}，但你應該使用select選項

$("#term").autocomplete({ 
    source: function(request, response){ 
     $.ajax({ 
      url: 'http://query.yahooapis.com/v1/public/yql', 
      dataType: 'JSONP', 
      data: { 
       format: 'json', 
       q: 'select * from xml where url="http://google.com/complete/search?output=toolbar&q=' + escape(request.term) + '"' 
      }, 
      success: function(data) { 
       response($.map(data.query.results.toplevel.CompleteSuggestion, 
        function(item) { 
         return { label: item.suggestion.data, value: item.suggestion.data }; 
        })); 
      } /* end succes function */ 
      }); /* end ajax function */ 
    }, /* end source function */ 
    minLength: 2, 
    select: function(event, ui) { 
     $("#term").val(ui.item.value); /* to set the clicked value in the input */ 
     $("#btn").click(); /* to submit the form, replace with your button*/ 
    } 
});

編輯：我添加了一些意見爲自己檢查是否有失蹤的托架（笑）

來源

2012-01-26 10:27:48

謝謝回覆。我實際上需要在單擊列表項時執行搜索，而不是提交按鈕像'$（「li a」）。click（）;'或'$（「。ui-menu-item a」）。click（）; '這將觸發第二個請求 – Youss

洛爾，不知道你想用它來再次搜索。雖然我是第一個使用「select」解決方案的人：P –

使用select事件，然後通過傳遞可從事件參數中獲得的值來觸發自動完成搜索。

select: function(e, ui){ 
    $("#term").autocomplete('search', ui.item.value); 
}

Demo

來源

2012-01-26 16:03:52 ShankarSangoli

感謝allot，這是我的頭編碼:) – Youss

看起來像很多[解答]（http://stackoverflow.com/a/9016998/123127）我給了5個小時前... –

對不起，我接受你的回答（在我的腦海裏，很少有時間讓我感到困惑......） – Youss

附上事件的jquery自動完成

回答

相關問題