¿Cómo crear un cuadro desplegable para la búsqueda en Baidu?

1. Para implementar esta función, debe confiar en jquery.js y jquery.autocomplete.js. Primero introduzca estos dos paquetes js y el archivo de estilo jquery.autocomplete.css, como se muestra en la figura. .

2. Este complemento incompleto debe usarse junto con el elemento de entrada, es decir, al buscar en la entrada, logrará el efecto de solicitar automáticamente la finalización. html. La siguiente es una captura de pantalla del código parcial como se muestra en la imagen.

3. Es muy sencillo utilizar el complemento de autocompletar. La siguiente es la forma más sencilla de utilizarlo. Simplemente coloque los datos que desea buscar en una matriz.

var idioma = [

? "chino",

? "inglés",

"español",

? "ruso",

? "francés",

? "japonés",

"coreano",

? "

];

Entonces usa

$("#end").autocomplete({

fuente: [ ?

idioma

]

}); eso es todo, el código es como se muestra en la figura.

4. Puede ver los resultados en ejecución a continuación, por ejemplo, buscar idiomas con la palabra C, como se muestra en la figura.

5. Veamos cómo combinarlo con datos de fondo. Se puede usar con ajax. Los datos devueltos por ajax se usan como la matriz anterior y se asignan directamente al complemento de autocompletar. utilizar. El código es como se muestra en la figura.

6. Echemos un vistazo al efecto real. Puede ver que después de buscar la palabra "上", todas las direcciones con la palabra "上" en la base de datos se pueden consultar automáticamente y eliminar. -Se creará el cuadro abajo como se muestra en la imagen.