Mein Stil, lasst uns zunächst die Renderings vorstellen. Wenn Sie der Meinung sind, dass es ziemlich gut ist, wenden Sie sich bitte an den Implementierungscode.
Lassen Sie uns keinen Unsinn sprechen und zuerst die Div -Hierarchie ansehen
<!-Das äußerste Div kann jederzeit angegeben werden, um die Breite des untergeordneten Elements zu definieren-> <div> <!-Formularbezeichnung Fügen Sie Texteingabeaufforderungen hinzu-> <Label für = ""> Volltextensuche </Label> <!-Mehrere Auswahlmöglichkeiten für Host-Diven addieren dynamisch in der Zukunft dynamisch hinzu. name = "Hint-search" value = "" Placeholder = "Wählen Sie Schlüsselwörter aus oder drücken Sie die Registerkarte oder geben Sie ein, um die Schlüsselwörter aufgeteilt zu haben.
Die Dom -Struktur -Annotation kann deutlich erklärt werden. Schauen wir uns CSS an
* {Boxgröße: Border-Box;}. Hint-Input-Span-Container {Breite: 100%; Hintergrundfarbe: #ffff; Border: 1px Solid #ccc; Box-Shadow: Einschub 0 1px 1px rgba (0, 0, 0, 0,075); Anzeige: Inline-Block; Middle; Border-Radius: 1px; Max-Breite: 100%; Linienhöhe: 30px;}. Hint-Input-Span-Container .Tag {Padding: -2px; Schriftgröße: 12px; font-familie: serif; {font-size: 10px;padding: 4px 6px;border: none;text-shadow: none;border-radius: 3px;font-weight: 200;}.label-primary {background: #2693FF;color: white;}.hint-input-span-container span i[data-role='remove'] {cursor: pointer;}.tag {margin-right: 2px; Farbe: weiß;}. Tag [data-role = "remove"] {margin-links: 2px; Absolute; Breite: 100px; Max-Höhe: 120px; Hintergrundfarbe: #ffff; Überlauf: Auto; Anzeige: Keine; Z-Index: 9999; 4px;}. Hint-ul Li: Hover {Hintergrundfarbe: #eee;}Es ist wichtig, Grenzgrößengrenzkasten in CSS festzulegen. Diese Eigenschaft kann Polsterung und Grenzberechnung in der Breite machen
.HINT-Input-Span-Container Es ist auch wichtig, die Anzeige auf Inline-Block festzulegen. Es gibt eine Liste von Tags
.HINT-Block setzt Z-Index auf 9999, um die Anzeige am vorderen Ende zu gewährleisten, und die Position ist absolut, um seine Position zu gewährleisten
Alle anderen können an Ihre Bedürfnisse eingestellt werden
Lassen Sie uns den JS -Code unten sehen
$(function(){//json data packet var data = {data:["123","Hello Beijing","Beijing Welcome","Beijing Good","Ocean","Ocean Guangli Bureau","I Ocean","I was surprised","I lalala","I can't bear it","Institution","Japan","Russia Berg "," Äthiopien "," Ibaka "," Bibi "]}; // Erhalten Sie das DOM-Objekt, das mehrmals später als var $ lINTSEARCH = $ (" input [name = 'Hint-Search'] ")"); var $ hintSearchContainer = $ (". $ (". Hint-ul"); // Dictionary AddDictionary (data.data, addullistener); // Dictionary-Liste Breite SetHinTSearchContainerWidth (); // Responsive Hörhörer mit Ereignis $ (Fenster) .Bind ('Größen', SethintensearchContainerwidth); // Get-Get-Get-Get-Get-Get-Get-Get-Get-Get-Get-Get-Get-Get-Get-Tothth-Listen, hinzufügen. Focus $ filtSearch.focus (function () {animtedown ();}); // Lost Focus // Verzögerung setzen, um auf die Antwort zu hören $ filtSearch.blur (function () {setTimeout (function () {AnimateUp ();}, 200);}). daran hindern, zu sprudeln und zu wechseln, fokus $ filtSearch.KeyDown (Funktion (e) {Switch (e.Which) {Fall 9: Fall 13: {var text = $ filtSearch.val (); if (! $. trim (text)) {$ HintSearch.val ("); {$ filtSearch.before ('<span>' + text + '<i Data-role = "remove"> </i> <i> </i> </i> </span> '); Pairing // Übereinstimmung mit dem Eingangsinhalt in LI, wenn die Zeichenfolge enthalten ist, kann sie gefunden und zurückgegeben werden. Die Suchmethode kann selbst geändert werden. data.data.filter (Funktion (x) {return x.indexof (text)! {für (var i = 0; i <dataarr.length; i ++) {$ fIntul.append ('<li>'+dataarr [i]+'</li>');} callback ();} // Suchinhaltsfunktion Aktualisierungsfunktion Aktualisierungsfunktion (Dataarr, Callback) {$ Hintul.empty (); Border Function animtedown () {$ hintblock.slidedown ('fast'). RGBA (34,36,38, .15) '}); animimUp () {$ hintblock.slideup ('fast', function () {$ filtSearchContainer. span "). Jeweils (Funktion () {if ($ .trim (text) == $ .trim ($ (this) .Text ())) {flag = 1; return;}}); Richtig: false;} // Set Hint-Input-Span-Container-Breite SetHinTSEeVeConainWidth () {var fIzt_width = $ lindSearchContainer.width () + 2 * analyst ($ HintSearchContainer.css ('Padding-Left'). parseInt ($ filtSearchContainer.css ('Border-Links'). Übereinstimmung (/[0-9]+/) [0]; $ (this) .Text (); if (! checkContainerHas (text)) {$ fileSearch.before ('<span>' + text + '<i data-role = "remove"> </i> <i> </i> </i> </i> </span>'); addSpanListenr () {$ (". Hint-Input-Span-Container-Span"). Delegate ("i", 'klick', function () {$ (this) .Parent (). REMET ();})}})Der Fokus liegt auf dem Anhören von Ereignissen und dem Betrieb von DOM -Elementen, die von JQuery abhängt.
Das obige ist die Eingabe-Multiple-Select-Pulldown-Implementierungsmethode der UI-Komponente, die Ihnen vom Editor (mit Suchfunktion) vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!