🖋️ 🏒 🤚 jQuery Autocomplete：あるフィールドから別のフィールドにパラメーターを渡す 🤑 💍 👥

この出版物では、このプラグインに関する多くの出版物がインターネット上にあるため、オートコンプリートが必要な理由を説明しません。含む、それについてはすでに2つの投稿があり、Habréにあります。しかし！複数レベルのリストでそれを使用する方法については説明されていませんが、第2レベルのデータは第1レベルでのデータの選択に依存します。かつて、このプラグインを複数レベルのリストに適切にねじ込むために、私はインターネット全体を数日間シャベルし、数日間殺さなければなりませんでした。

例として、家の住所で検索プロバイダーを使用します。ご覧のとおり、最初のフィールドでは、ストリートを入力するときに、フィールドに入力した文字で始まるすべてのストリートのリストを取得します。通りを選択します。 2番目のフィールドでは、最初のフィールドで選択した通りに対応する家だけを取得します。つまり、2番目のフィールドでは、最初のフィールドから「通りの名前を渡し」、ドロップダウンリスト内の指定された通りに対応する家だけを除外しました。

コードは次のとおりです。

1.検索ブロックのレイアウト：

<form id='formadrall' method='post' action=''> <p>:</p> <input type='text' id='street' placeholder=':  ' value='' > <p>:</p> <input type='text' id='house' placeholder=': 172' value=''> <p id='check' class='button'></p> </form>

2. jQueryコード：

 $(document).ready(function(){ var ValueStreet; var sValueHouse; function selectStreet(li) { var ac = $('#house')[0].autocompleter; if( li == null ) ValueStreet = '  !'; if( !!li.extra ) ValueStreet = li.extra[2]; else sValueStreet = li.selectValue; ac.flushCache(); ac.setExtraParams({street_name:sValueStreet}); <!--   street_name        --> document.getElementById('house').focus(); } function selectHouse(li) { if( li == null ) sValueHouse = '  !'; if( !!li.extra ) sValueHouse = li.extra[2]; else sValueHouse = li.selectValue; } <!--     --> $('#street').autocomplete('autocomplete_street.php', { delay:10, minChars:2, matchSubset:10, autoFill:false, matchContains:2, cacheLength:50, selectFirst:true, maxItemsToShow:30, onItemSelect:selectStreet, extraParams:{street_name:' '} <!--  --> }); <!--      (   strnm      )--> $('#house').autocomplete('autocomplete_house.php', { delay:5, minChars:1, matchSubset:1, autoFill:false, matchContains:1, cacheLength:50, selectFirst:true, maxItemsToShow:50, onItemSelect:selectHouse, extraParams:{street_name:' '} <!--  --> }); $('#check').click(function(){ $.ajax({ type:'POST', url: 'search.php', data: 'street='+$('#street').val()+'&house='+$('#house').val(), cache: false, success: function(html){ } }); });

だから：

1.プラグインで最初に行うことは、あるフィールドから別のフィールドに転送される外部パラメーターを初期化することです。

//ac.setExtraParams({street_name:sValueStreet}）;

2.各フィールド（通りと家）の各ハンドラーで、このパラメーターextraParams：{street_name： ''}の設定を規定します

以上です。

jQuery Autocomplete：あるフィールドから別のフィールドにパラメーターを渡す

More articles: