3

入力が 1 つの HTML 検索フォームがあります。入力フィールドには、エリア名、トレッキング名、その他のキーワードの 3 つを入力できます。

  • エリアはデータベースにないので、ユーザーのエリア名をオートコンプリートする入力にフックされたデータリスト フィールド (HTML) を持っているだけです。
  • トレックはDBからのものなので、JqueryUIのオートコンプリートがサーバーから名前をロードし、ユーザーが名前を選択すると、サイトは彼を正しいページに送ります。
  • ユーザーが何か他のものを入力して検索を押すと、フォームはユーザーを検索ページに送り、正しい結果を表示します。

私の問題は：

ユーザーがリストからエリア名を選択した場合、検索でユーザーをエリアページに送信する必要があります。jquery autocomplete には select プロパティがあります。datalist に似たようなものはありますか? オートコンプリートが 2 つの異なるリソースからロードするオプションがあるのではないでしょうか? (1 つのクライアントと 1 つのサーバー)

<form action="" method="get">
   <input class="auto" name="desc" list="areas" />
   <button type="submit">seatch</button>
   <datalist id="areas">
       <option id="area1" value="area1" >1</option>
       <option id="area2" value="area2" >2</option>
       <option id="area2" value="area2" >2</option>
   </datalist>
</form>

脚本：

 $('.auto').autocomplete({
    source:"php/autocomplete.php",
    minLength:1,
    select: function(event,ui){
        changePage('content/trek.php', {
            Trek_Id:ui.item.Trek_Id
        });
    }
});

よろしくお願いします

4

1 に答える 1

0

残念ながら、 のサポートdatalistはせいぜい平凡であり、この要素に特化したイベントはありません。最良のオプションは、バインドされている入力の値をデータリストで使用可能なオプションと比較することです。一致が見つかった場合は、フォームを送信する代わりに、その情報を使用してエリアの URL に移動できます。

あなたはすでにjQueryを使用しているので、簡単な解決策を書きました：

$('form').submit(function(e) {
   var $input = $(this).find('input.auto');
       val = $input.val();
       list = $input.attr('list'),
       match = $('#'+list + ' option').filter(function() {
           return ($(this).val() === val);
       });
    
    if(match.length > 0) {
        e.preventDefault();

        var area = match.val();       
        alert('Navigate to ' + area);
        
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="get">
   <input class="auto" name="desc" list="areas" />
   <button type="submit">seatch</button>
   <datalist id="areas">
       <option id="area1" value="area1" >1</option>
       <option id="area2" value="area3" >3</option>
       <option id="area2" value="area2" >2</option>
   </datalist>
 </form>

送信時に、入力の値がデータリスト オプションの値と正確に一致するかどうかがチェックされます。その場合、アラートが表示されます (それを選択した機能に置き換えます)。それ以外の場合は、フォームを送信するだけです。

于 2015-04-22T11:39:15.707 に答える