Basado en el complemento Bootstrap, AutoComplete completa automáticamente los formularios, proporciona código de script, casos de uso y servidor de fondo (PHP). Hay algunas cosas que no se explican claramente en el texto original, y espero que pueda ayudar a todos.
En primer lugar, debo estar cargando bootstrap y jQuery. Cabe señalar que la matriz bidimensional devuelta por el backend es consistente con la llamada debajo del método Formatitem;
¡Además, los datos devueltos deben ser Parsejson primero! Recordar.
Descripción del parámetro relacionado:
Fuente: función (consulta, proceso) {}. La consulta representa la cadena en el cuadro de entrada de texto actual. En este método, los datos se pueden solicitar desde el fondo (un objeto JSON en forma de una matriz) a través de AJAX, y luego el objeto devuelto se usa como un parámetro del proceso;
formatitem: function (elemento) {}. El objeto JSON específico que devuelve los datos se convierte en un formato de cadena, que se utiliza para mostrarlo en la lista de indicaciones, y el valor de retorno es: String;
setValue: function (elemento) {}. Cuando se seleccione un elemento en la lista de indicaciones, establezca el valor que se muestra en el cuadro de entrada de texto y el valor que realmente debe obtenerse. Formato de valor de retorno: {'Value de datos': ítem ["Propiedad de elemento del valor que se muestra en el cuadro de entrada"], 'Valor real': ítem ["Propiedad del elemento del valor real que debe obtenerse"]}, más tarde, este valor se puede obtener a través de la propiedad de valor real del cuadro de entrada del texto;
Elementos: el número máximo de conjuntos de resultados para las indicaciones automáticas de finalización, predeterminado: 8;
MinLength: el proceso de coincidencia se realizará solo cuando la cadena en el cuadro de entrada de texto actual alcanza el valor de la propiedad. Predeterminado: 1;
Retraso: después de especificar el número de milisegundos de retraso, se solicitarán datos de los antecedentes para evitar que las solicitudes frecuentes de los antecedentes sean causadas con frecuencia por una entrada rápida. Valor predeterminado: 500
Basado en el complemento Bootstrap, el formulario automáticamente completo, el código es el siguiente
1. Código
<script> $ ('#sim_iccid'). Autocompletete ({fuente: function (Query, Process) {var MatchCount = this.options.items; // El número máximo de conjuntos de resultados permitidos es es $ .get ("http://www.soyiyuan.com/update/", {"iccid": consulta, "MatchCount": MatchCount}, function (respdata) {respdata = $ .Parsejson (respdata); // Los datos devueltos son el proceso devuelto (respdata);}; item ["iccid"]+"("+item ["móvil"]+")";2. $ Datos es una matriz bidimensional
echo json_encode ($ data)
3. El formato JSON estándar que necesita ser devuelto
[Código] [{"ICCID": "12345678901234567890", "móvil": "1850000"}, {"iccid": "12345785", "móvil": "1850001"}] [código]
Bootstrap AutoComplete Control Autocomplette se transforma en función del control de Bootstrap Typeahead, porque Typeehead no admite objetos complejos.
// El código de muestra es el siguiente: $ ('#autocompleteInput'). Autocomplete ({fuente: function (Query, Process) {var MatchCount = this.options.items; // return el número máximo de resultados de resultados $ .post ("/bootstrap/region", {"MatchInfo": Query, "MatchCount": MatchCount}, función (REPTATA) proceso (respdata); {'Data-Value': item ["RegionName"], 'Real-Value': item ["RegionCode"]}; $ ("#gobtn"). Click (function () {// Obtenga el valor real del cuadro de texto var regionCode = $ ("#autocompleteInput"). attr ("valor real") || ""; alerta (regionCode);});Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.