Comment utiliser Layui pour implémenter la fonction de recherche automatique

Comment utiliser Layui pour implémenter la fonction de recherche automatique

Introduction :
Layui est un framework de développement frontal léger, simple et facile à utiliser, avec des composants et des modules riches, notamment des formulaires, des fenêtres contextuelles, une navigation, et les menus attendent. Le composant de saisie semi-automatique peut nous aider à mettre en œuvre des invites intelligentes lors de la recherche et à offrir une meilleure expérience utilisateur. Cet article présentera en détail comment utiliser le composant de saisie semi-automatique de Layui pour implémenter la fonction de recherche et fournira des exemples de code spécifiques.

Étape 1 : Présentez Layui et jQuery
Tout d'abord, présentez les fichiers de script de Layui et jQuery en HTML. Vous pouvez télécharger la dernière version de Layui depuis le site officiel de Layui (https://www.layui.com/) et l'extraire dans le projet. Ensuite, introduisez les deux fichiers de script suivants en HTML :

Étape 2 : Créez un champ de recherche et un conteneur de résultats
Créez un champ de saisie et un conteneur pour afficher les résultats de recherche en HTML. Par exemple :

où,searchInputest l'identifiant de la zone de saisie etsearchResultest l'identifiant du conteneur de résultats.searchInput是输入框的id，searchResult是结果容器的id。

步骤三：编写JavaScript代码
在JavaScript中调用Layui的自动完成组件，来实现搜索的功能。首先，通过layui.use()方法引入自动完成模块，并初始化：

layui.use('autocomplete', function() { var autocomplete = layui.autocomplete; autocomplete.render({ elem: '#searchInput', // 输入框元素选择器 url: 'path/to/searchApi', // 搜索接口地址 method: 'post', // 请求方式，默认为'get' onselect: function(data) { // 选择某个提示项后的回调函数 // 在此处可以进行相关操作，如打开搜索结果页面等 console.log(data); } }); });

其中，elem参数指定了输入框的选择器，url参数指定了搜索接口的地址。可以根据实际情况修改这些参数。

在onselect回调函数中，可以根据自己的需求进行相关操作。例如，可以通过data

Appelez le composant de saisie semi-automatique de Layui en JavaScript pour implémenter la fonction de recherche. Tout d'abord, introduisez le module de saisie semi-automatique via la méthodelayui.use()et initialisez-le :

 1, 'value' => 'Apple', 'group' => 'Fruit'), array('id' => 2, 'value' => 'Banana', 'group' => 'Fruit'), array('id' => 3, 'value' => 'Carrot', 'group' => 'Vegetable'), // ... ); // 将查询结果以JSON格式返回给前端 header('Content-Type: application/json'); echo json_encode($result); ?>

Étape 4 : Écrivez le code de l'interface en arrière-plan

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!