-1

3 つの先行入力フィールドがあります。

それらは次のとおりです。

国: | _ _ _ _ _ ____ |

状態: | _ _ _ _ _ ____ |

都市: | _ _ _ _ _ ____ |

次に、2 番目の typeahead フィールドのコードを示します (残りは同様です)。

<input type="text" class="span3" style="margin: 0 auto;"
data-provide="typeahead"  data-items="4"
data-source="["Alabama","Alaska",
               <many more US states>
              ,"Wyoming"]">

今...ここの指示に従うことで達成できるドロップダウンのように見えるために、両方の先行入力フィールドが必要です..問題ありません。

私が求めている質問は、以下の「最後のオプション」に関するものです。

プレースホルダー ケース:

各ドロップダウン リストに、グレー表示されたデフォルトのプレースホルダー テキストが必要です。

例えば：

国: | _米国_ _ _ _ _ |

状態: | _アイオワ_ _ _ _ |

都市: | _デモイン____ |

欠損値のケース:

ユーザーがオートコンプリートに存在しない市区町村の値を入力した場合、リンク付きのドロップダウンを表示したいと思います..

例: ユーザーは City フィールドに「yahoo」と入力します。これにより、「その都市は存在しません。ここをクリックして検索してください」という出力が表示されます。

上記のテキストをクリックすると、Google.com にリダイレクトされます。

エラーケース:

最初のフィールド (国) で何も選択されていない場合は、2 番目のフィールドのドロップダウンにデフォルト値「開始する国を選択してください」が表示されます。

最後のオプション:

都市の選択が成功した場合、例: サンフランシスコ ... "mysite.com/datastore/calsan.html" のような新しい html ファイルにリダイレクトしたい (各選択の最初の 3 文字を小文字で追加)

この最終的な html ファイルは事前に生成され、都市 "サンフランシスコ" に関する関連する統計情報と楽しい事実が含まれます。また、データストア フォルダーで事前に生成された他の都市の楽しい事実も含まれます。

4

2 に答える 2

8

以下の私のスニペットを参照してください

プレースホルダーケース

<script type="text/javascript">
  $(document).ready(function(){
    $('.combobox').combobox({placeholder: "Type Something.."});
  });
</script>

最後のオプション

<script type="text/javascript">
    $('.combobox').change(function(){
      if($(this).val().length > 0){
        var fileName = $(this).val().substr(0,3); // this is for getting the first 3 characters, apply the same logic wherever necessary
        window.location("/datastrore/" + fileName + ".html");
      }   
    })
</script>
于 2012-10-13T06:52:14.400 に答える
3

最後のオプション

インライン JavaScript とオプション値を使用してこれを行う簡単な方法があるようです。私はこのより簡単な方法を使用すると思います..

http://webdesign.about.com/od/javascript/f/blfaqddredirect.htm

プレースホルダー ケースとその他のすべてのケース

http://harvesthq.github.com/chosen/

上記のライブラリは私の問題をすべて解決し、非常に強力です! ブートストラップ用ではありませんが、ブートストラップに同等のオプションがあるまで気にしません。

于 2012-10-13T09:38:41.417 に答える