0

私はjqueryコンボボックスを使用しており、そこに提供されているソースコードに依存しています。リモートソースから提供されたデータが必要なので、ajax で接続しました。ただし、AJAX は非同期呼び出しであるため、コンボボックスを検索結果データで更新する必要があります。

コンボボックスで検索をトリガーするにはどうすればよいですか?

スニペット:

/* In 
$.widget( "ui.combobox", {
            _create: function() {
// input definition
*/
.autocomplete({
    delay: 0,
    minLength: 0,
    source: function( request, response ) {
        // implements retrieving and filtering data from the select
        var term = request.term;

        if(term.length >= 2){
            var abbreviation = term.substring(0,2);
            if(!(abbreviation in cache)){
                searchResultData = searchCities(abbreviation);
                updateOptions(select, searchResultData);
                cache[abbreviation] = 1;
            }
        }

        // updates the search widget with options matching request.term
        var responseData = filterOptionsForResponse(select, term);

        response(responseData);
    },

コードの残りの部分は、jquery サイトで提供されているとおりです。searchCities(abbreviation)上記のコードは、オブジェクトのローカル配列を返すときに完全に正常に機能します。

  • searchCities(abbreviation): 略語に一致する都市の配列を返します
  • updateOptions(select, data): 指定されたデータで選択コンボボックスのオプションを更新します
  • filterOptionsForResponse(select, term): 正規表現に基づいて用語に一致するオプションでコンボボックスを更新します

ajaxを使用したsearchCitiesの現在のバージョン:

function searchCities(abbreviation){
    if(!!abbreviation){
        $.ajax({
                url: "/wah/destinationsJson.action",
                dataType: "json",
                data: {
                    term: abbreviation
                },
                type: "GET",
                success: function(data){
                    updateOptions($("#searchbox"), data.cities);
                    // $("#searchbox input").trigger('autocompleteselect', data.term);
                    // return data.cities;
                }
            });
    }
}

上記のトリガーは検索をトリガーしません! このコンボボックスで検索をトリガーする方法を教えてください。

PS: jsfiddle/jsbin を提供できなかったことをお詫び申し上げます。

4

1 に答える 1

0

私はついにそれを働かせました！

http://jsfiddle.net/SRekL/

関心のある行:

入力 -> ソース -> ajax -> 成功

success: function(data) {
    optionData = $.map(data.geonames,function(item){
        return new Object( {name: item.adminName1} ); ;
    });

    updateOptions(select, optionData);
    response(filterOptionsForResponse(select, term));
    return;
}

ノート：

  • updateOptions(...)私の関数はプロパティ「name」に依存しているため、optionData をオブジェクトの配列に変換します。
  • updateOptions(select, optionData): 返されたデータでこのコンボボックスのオプションを更新します
  • filterOptionsForResponse(select, term): 用語に基づいてオプションをフィルタリングし、一致したテキストを強調表示します。

このソリューションは、最初の 2 文字でサーバーにアクセスする必要があるという私の要件に合わせて調整されています。検索用語に基づいてオプションをフィルタリングし、指定されたオプションのリストに結果セットを追加します。

デモを行うために、jsFiddle での ajax 呼び出しの URL として「 http://ws.geonames.org/searchJSON 」を使用しました。

また、SO の一連のスレッドが非常に役立つことがわかりました。

Clue trail

于 2012-05-31T10:10:18.400 に答える