0

jQueryとブートストラップを使用してドロップダウン検索の提案をします。以下はhtmlコードですが、検索フォームに何かを入力してからフォームをクリアすると、図のように2つのフォームが表示されます。なぜですか。jQueryは初めてです。助けてくれてありがとう。

<div class="container">
    <div class="row">
        <div class="span6 offset3">
            <form class="form-search">
                <input type="text" id="month" name="month" class="input-medium search-query">
                <button type="submit" class="btn">Search</button>
                <div id="suggestions">
                </div>
            </form>
        </div>
    </div>
</div>
<script>
jQuery("#month").keyup(function(){
      ajax('search', ['month'], 'suggestions')});
</script>

ここに画像の説明を入力してください

編集： 私はweb2pyフレームワークを使用しています。これは検索関数のコードです：

def search():
    if not request.vars.month: return dict()
    month_start = request.vars.month
    selected=complete('piracyfinder',month_start)  #this line get the search results
    return DIV(*[DIV(k['title'],
                     _onclick="jQuery('#month').val('%s')" % k['title'],
                     _onmouseover="this.style.backgroundColor='lightblue'",
                     _onmouseout="this.style.backgroundColor='white'"
                     ) for k in selected])
4

2 に答える 2

0

if not request.vars.monthmonthvar が存在するが空である場合にも適用されます。したがって、フォームを返しています。

次のいずれかを行う必要があります。

  • 「提案」コードを別のページ/ファイルに配置する
  • リクエストに変数を追加しisAJAXます (または AJAX リクエストを識別する他の方法)。
  • 変数が偽かどうかをチェックするのではなく、変数が存在するかどうかをチェックします。
于 2013-03-19T04:23:02.460 に答える
0

search()提案の入力とフォームの作成に同じ関数 (つまり) を使用しているようです (ただし、その関数は送信時にフォームを処理しません)。ロジックによると、request.vars.monthが空または存在しない場合、関数は空の辞書を返します。これにより、関連付けられたビュー (つまり、/views/[コントローラー名]/search.html) が実行されて返されます。おそらく、search.html ビューには上記の HTML コードが含まれています。そのため、入力ボックスをクリアすると、keyup ハンドラーがトリガーされ、空の month 変数が送信されます。その結果、フォームの新しいコピーが返され、「suggestions」div に挿入されます。request.vars.month存在するかどうかを確認することで、この問題を回避できます。

if not request.vars.month:
    return '' if 'month' in request.vars else dict()

より良いアプローチは、検索フォームと提案に異なる機能を使用することです。それらは完全に異なることを行い、コードを共有しないためです。

于 2013-03-19T13:03:20.787 に答える