Com base no plug-in de inicialização, o AutoComplete conclui automaticamente os formulários, fornece código de script, casos de uso e servidor de fundo (PHP). Existem algumas coisas que não são explicadas claramente no texto original, e espero que possa ajudar a todos.
Primeiro de tudo, devo estar carregando Bootstrap & JQuery. Deve-se notar que a matriz bidimensional retornada pelo back-end é consistente com a chamada abaixo do método Formatitem;
Além disso, os dados retornados devem ser o Parsejson primeiro! Lembrar.
Descrição do parâmetro relacionado:
Fonte: function (consulta, processo) {}. A consulta representa a sequência na caixa de entrada de texto atual. Neste método, os dados podem ser solicitados do plano de fundo (um objeto JSON na forma de uma matriz) através do Ajax e, em seguida, o objeto retornado é usado como um parâmetro do processo;
formatItem: function (item) {}. O objeto JSON específico que retorna os dados é convertido em um formato de string, que é usado para exibi -lo na lista de prompts, e o valor de retorno é: string;
setValue: function (item) {}. Quando um item na lista de prompts for selecionado, defina o valor exibido na caixa de entrada de texto e o valor que realmente precisa ser obtido. Retorno Formato do Valor: {'Data-Value': Item ["Propriedade do item do valor exibido na caixa de entrada"], 'Valor real': item ["Propriedade do item do valor real que precisa ser obtido"]}, posteriormente, esse valor pode ser obtido através da propriedade de valor real da caixa de entrada de texto;
Itens: o número máximo de conjuntos de resultados para avisos de conclusão automática, padrão: 8;
MinLength: O processo de correspondência será executado apenas quando a sequência na caixa de entrada de texto atual atingir o valor da propriedade. Padrão: 1;
Atraso: Após especificar o número de milissegundos de atraso, os dados serão solicitados em segundo plano para impedir que solicitações frequentes do plano de fundo sejam frequentemente causadas por entrada rápida. Padrão: 500
Com base no plug-in de bootstrap, o formulário de preenchimento automaticamente completo, o código é o seguinte
1. Código
<Cript> $ ('#sim_iccid'). $ .get ("http://www.soyiyuan.com/update/", {"iccid": Query, "MatchCount": MatchCount}, função (respdata) {respdata = $ .parsejson (respdata); Item ["ICCID"]+"(" Item ["Mobile"]+")";2. $ Dados são uma matriz bidimensional
eco json_encode ($ dados)
3. O formato JSON padrão que precisa ser devolvido
[Code] [{"iccid": "12345678901234567890", "Mobile": "1850000"}, {"iccid": "12345785", "Mobile": "1850001"} [Código]
O AutoCompleto de controle autocompleto de bootstrap é transformado com base no tipo de cabeça de controle do próprio Bootstrap, porque o TypeAead não suporta objetos complexos.
// O código de amostra é o seguinte: $ ('#AUTOCIMELETEINPUT'). AutoComplete ({fonte: function (consulta, process) {var matchCount = this.options.items; // retorna o número máximo de resultados de resultados $ .Post ("/bootstap/região", {"fathinfo": Quey ": processo (respdata); {'Data-value': Item ["RegionName"], 'Valor real': Item ["RegionCode"]}; $ ("#GOBTN"). Clique em (function () {// obtenha o valor real da caixa de texto var regionCode = $ ("#autocompleteInput"). att ("valor real") || ""; ALERT (RegionCode);});Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.