私のスタイル、最初にレンダリングを紹介しましょう。かなり良いと思われる場合は、実装コードを参照してください。
ナンセンスについて話さないで、最初にdiv階層を見てみましょう
<！ - 最も外側のdivは、子要素の幅を定義するためにいつでも指定できます - > <div> <！ - フォームラベルの追加テキストプロンプト - > <ラベル= "">フルテキスト検索</label> <！ - divをホストする複数の選択は将来のスパンをダイナミックに追加します - > <div> <！ - フォーム要素は、リスニングイベントをバインドし、ユーザー入力を受け取ります。 name = "hint-search" value = "" placeholder = "キーワードを選択するか、[キーワード]を押してキーワードを分割する"> </div> <！ - ドロップダウンリスト列 - > <div> <！ - jsonデータパケットに従って動的にLIを追加します - > <ul> </ul> </div>
DOM構造注釈は明確に説明できます。CSSを見てみましょう
* {box-sizing：border-box;}。ヒント入力-Span-Container {width：100％; background-color：#ffff; border：1px solid #ccc; inset 0 1px 1px rgba（0、0、0、0、0.075）;ディスプレイ：インラインブロック;パディング：2px 4px;カラー：＃555;中間;境界線 - 1px; max-width：100％; line-height：30px;}。ヒント入力-Span-container .tag {padding：-2px; font-size：12px; font-family：serif ;; rign-right：2px; magne-top; 10px;パディング：4px 6px; border：none; text-shadow：none; border-radius：3px; font-weight：200;}。label-primary {background：＃2693ff; color：white;}。 [data-role = "remove"] {マージン左：2px;カーソル：ポインター;} input [name = 'hint-search'] {border：none; box-shadow：none; outline：none; background-color：transparent; padding：0; margin：0; width：100％; max-width：max-het;}。 120px; background-color：#ffff; overflow：auto; display：none; z-index：9999;}。hint-ul {none; list-style-type：none; padding-left：5px;}。hint-ul li {font-size：14px; padding：2pxx-ul li li：hover {background-color：#eee;}CSSの境界線を設定することが重要です：ボーダーボックス。このプロパティは、パディングと境界線を幅で計算することができます
.hint-input-span-containerインラインブロックに表示を設定することも重要です。タグのリストがあります
.hint-blockはz-indexを9999に設定して、フロントエンドに表示することを確認します。
他のすべては、あなたのニーズに応じて調整できます
以下のJSコードを見てみましょう
$（function（）{// json data packet var data = {data：["123"、 "hello beijing"、 "beijing welcome"、 "beijing good"、 "ocean"、 "ocean guangli bureau"、 "i ocean"、 "i sustrawed"、 "i larala"、 "us bear" Mountain "、" Ethiopia "、" ibaka "、" bibi "]}; // //複数回呼び出す必要があるdomオブジェクトを取得しますvar $ hintsearch = $（" input = 'hint-search'] "）; $（ "。hint-ul"）; // dictionary adddictionary（data.data、addullistener）; // dictionaryリスト幅sethintsearchcontainerwidth（）; // sethintsearchcontainerwidth（）; // repsion responsive responsive event $（ 'resize'、sethintsearchcontainerwidth）; // get Focus $ hintsearch.focus（function（）{animtedown（）;}）; // lost focus // click応答を聞くために遅延を設定する$ hintsearch.blur（functionout（）{function（）{animateup（）;}、200）;}）;泡立ちとスイッチングフォーカスの防止$ hintsearch.keydown（function（e）{switch（e.which）{case 9：case 13：{var text = $ hintsearch.val（）; if（！$。trim（text））{$ hintsearch.val（ ""）; e.preventdefault（）; {$ hintsearch.before（ '<span>' + text + '<i data-role = "remove"> </i> <i> </i> </i> </span> '）; addspanlistenr（）;} // console.log（$ hintsearch.val（））; $ hintsearch.val（ ""）; $ hintsearch.focus（）; e.preventdefault（）; break; LIの入力コンテンツは、文字列が含まれている場合、検索アレイを返す限り、検索方法を確認できます。 data.data.filter（function（x）{return x.indexof（text）！= -1;}）if（tmparr.length === 0）{tmparr.push（ "matching entry"）;} updatedictionary（tmparr、addullistener）;}） {for（var i = 0; i <dataarr.length; i ++）{$ hintul.append（ '<li>'+dataarr [i]+'</li>'）;} callback（）;} //検索コンテンツ関数updatedictionary（dataarr、callback）{$ hintul.empty（）; function animtedown（）{$ hintblock.slidedown（ 'fast'）。css（{'border'： '1px solid＃96c8da'、 'border-top'： '0px'、 'box-shadow'： '0 2px 3px 0 rgba（34,36,38、.15） '}）; $ hintsearchcontainer.css（{' border '：' 1px solid＃96c8da '、' border-bottom '：' 0px '、' box-sadow '：' 0 2px 3px 0 rgba（34,36,38、.15）; AnimateUp（）{$ hintblock.slideup（ 'fast'、function（）{$ hintsearchcontainer.css（{'border'： '1px solid #ccc'}）;}）;} //入力機能checkcontainerhas（テキスト）{var flag = 0; $ 0; span "）。各（function（）{if（$ .trim（text）== $ .trim（$（this）.text（））{flag = 1; return;}}）; return flag？ true：false;} //ヒントインプットスパン - コンテナ型幅function sethintsearchcontainerwidth（）{var hint_width = $ hintsearchcontainer.width（） + 2 * parseint（$ hintsearchcontainer.css（ 'padding-left'）。 parseint（$ hintsearchcontainer.css（ 'border-left'）。match（/[0-9]+/）[0]）; $ hintblock.css（{'width'：hint_width}） $（this）.text（）; if（！checkcontainerhas（text））{$ hintsearch.before（ '<span>' + text + '<i data-role = "remove"> </i> <i> </i> </i> </span>'）; addSpanListenr（）; addspanlistenr（）{$（ "。ヒントインットプットスパンコンテナースパン"）。焦点は、jQueryに依存するイベントや操作DOM要素を聴くことにあります。
上記は、エディターが紹介したUIコンポーネントの入力マルチセレクトプルダウン実装方法（検索機能を使用）です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！