Meu estilo, vamos primeiro apresentar as renderizações. Se você acha que é muito bom, consulte o código de implementação.
Não vamos falar bobagem e olhar para a hierarquia div.
<!-A div mais externa pode ser especificada a qualquer momento para definir a largura do elemento filho-> <div> <!-formulário, adicione os prompts de texto-> <gravador para = ""> pesquisa de texto completo </cret> <!-múltiplas opções para o host-span adicione dinamicamente o span no futuro-> <r-!! name = "Pesquisa de sugestão" value = "" espaço reservado = "selecione palavras-chave ou pressione a guia ou enter para dividir palavras-chave"> </div> <!-incluir colunas da lista suspensa-> <div> <!-Adicione dinamicamente Li de acordo com os pacotes de dados JSON-> <ul> </ul> </div>
A anotação da estrutura DOM pode ser explicada claramente, vamos dar uma olhada no CSS
* {Box-sizing: Border-box;}. DIP-DIPT-SPAN-CONTINER {Width: 100%; cor de fundo: #FFFF; borda: 1px Solid #CCC; Box-shadow: Insert 0 1px 1px RGBA (0, 0, 0, 0.075); 1px; max-larga: 100%; altura da linha: 30px;}. DIP-INPUT-SPAN-CONTINER .TAG {PADDING: -2PX; font-size: 12px; font-family: serif ;; margin-right: 2px; margin-top: 2px; margin-bottom: 2px; 10px; preenchimento: 4px 6px; borda: nenhum; Shadow Text: Nenhum; Rádio de Fronteira: 3px; Peso de Fonte: 200;}. Label-Primary {Background: #2693ff; cor: White;}. branco;}. tag [dados-role = "remover"] {margin-left: 2px; cursor: pointer;} entrada [name = '' signe-search '] {border: nenhum; box-shadow: nenhuma; descrição: nenhum; sem cor de fundo: transparente; padding: 0; margin: 0; width: 100%; 100px; Max-HELY: 120PX; Background-Color: #FFFF; Overflow: Auto; Display: Nenhum; Z-Index: 9999;}. Li: Hover {Background-Color: #eee;}É importante definir o tamanho da fronteira: caixa de fronteira no CSS. Esta propriedade pode fazer com que o preenchimento e a computação de fronteira
.Hint Input-Span-Container, também é importante definir a exibição para bloco embutido, há uma lista de tags
.hint-block define Z-Index a 9999 para garantir a exibição no front-end, e a posição é absoluta para garantir sua posição
Todos os outros podem ser ajustados de acordo com suas necessidades
Vamos ver o código JS abaixo
$ (function () {// pacote de dados json var data = {data: ["123", "hello beijing", "pequim bem -vindo", "beijing bom", "oceano", "guangli guangli bureau," eu ocean "," eu estava surpreso "," i lalala "," eu não posso suportar "", "instituição", "instituição" "," Mountain "," Etiopia "," Ibaka "," Bibi "]}; // Obtenha o objeto DOM que precisa ser chamado várias vezes mais posterior var $ hintsearch = $ (" input [name = 'hint-search'] "); var $ hintsearchContainer = $ ($". $ (". Dint-ul"); // Adicione o dicionário AddDictionary (data.data, addullistener); // Definir a largura da lista de dicionários sethintSearchContainerWidth (); // Implementar a escuta responsiva do evento REDIMEIDO (Window) .Bind ('REDIELH', SethIntSearchContainerWidth); foco $ hintSearch.focus (function () {AnimteDown ();}); // Lost Focus // Defina o atraso para ouvir clique em Responder $ HintSearch.blur (function () {setTimeout (function () {AnimateUp ();}, 200);}); impedido de borbulhar e alternar o foco $ HINTSEARCH.KEYDOWN (function (e) {switch (E.Which) {Caso 9: Caso 13: {var text = $ HintSearch.val (); if (! $. TRIM (text)) {$ HintSearch.val (""); e.PreventDeFault (); {$ hintsearch.be antes ('<span>' + text + '<i data-role = "remover"> </i> <i> </i> </i> </span> '); addspanListenr ();} // console.log ($ hintsearch.val ()); $ hintesearch.val (""); $ hintsearch: (); e.)}); Emparelhamento // corresponde ao conteúdo de entrada em Li Se a string estiver incluída, ela pode ser encontrada e retornada // O método de pesquisa pode ser modificado por si só. data.data.filter(function(x){return x.indexOf(text) != -1;})if (tmparr.length === 0) {tmparr.push("No matching entry");}updateDictionary(tmparr,addUlListener);})//Function library//Add a common dictionary library for users function addDictionary(dataarr, callback) {for (var i = 0; i <Dataarr.Length; i ++) {$ hintul.append ('<li>'+dataarr [i]+'</li>');} callback ();} // Atualize o conteúdo da função atualizada (Dataarr, retorno de chamada) {$ hintul.empty ();; function anriDedown () {$ hintblock.sledown ('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-shadow ':' 0 2px 3px 0 RGBA (34,36.3.30, AnimateUp () {$ hintblock.slideUp ('Fast', function () {$ hintsearchContainer.css ({'borda': '1px sólido #ccc'});});});} // verifique se é repetido com a função de entrada (text-spat); span "). cada (function () {if ($ .Trim (text) == $ .Trim ($ (this) .Text ())) {flag = 1; return;}}); retornar sinalizador? TRUE: FUNDO;} // Definir função de largura-container-span-container SethIntSearchContainerWidth () {var hint_width = $ hintSearchContainer.width () + 2 * parseint ($ HINTSEARCHCONTAINER.CSS ('Padding-Left'). parseint ($ hintSearchContainer.css ('borda-left'). Match (/[0-9]+/) [0]); $ hintblock.css ({'width': hint_width});} // bind "function, function 'click), ($ hint_width});} // bind" function, function', ($ hint_width});} // vinte a função da função, (), ($ hint_width});} // bate $ (this) .Text (); if (! checkContainerHas (text)) {$ hinsearch.be antes ('<pan>' + text + '<i data-role = "remover"> </i> <i> </i> </i> </span> span; span); addspanlistenr ();} $ HintSearch.val (span>');); addspanListenr () {$ ("..O foco é ouvir eventos e operar elementos DOM, que depende do jQuery.
O acima exposto é o método de implementação pull-down múltiplo de entrada do componente de interface do usuário introduzido pelo editor (com a função de pesquisa). Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!