メン醤のjQuery workshop

jQueryの小技などのサンプルをコード例として紹介するブログです。ネイティブJavaScriptから移行したいjQuery初心者向け、jQueryの魅力を知ってもらえたら。

autocomplete

jQuery UI autocompleteの結果表示をカスタマイズしてdivやtableに表示させる

前回の続きです jquery-workshop.hatenablog.com 今回は、結果表示の方 前回は検索条件と検索対象のカスタマイズでしたが 今回は検索結果表示のカスタマイズです。 autocompleteではテキストボックスの下に一覧が出るのが標準ですが これを <div id="search_results"> <div class="search-resuls"> ... </div> <div class="search-resuls"> ... </div> <div class="search-resuls"> ..</div></div>…

jQuery UI autocompleteの検索条件をカスタマイズする

データの用意 準備として検索用のデータを用意します。 (データの内容は何でもいいですよ?) 処理概要 jQuery UIのautocompleteは、sourceに指定した要素において labelは見た目上の表示に valueは選択した際に代入される値 となります。 そのため、まずは $…