How to use Layui to implement automatic search function

How to use Layui to implement automatic search function

Introduction:
Layui is a lightweight front-end development framework that is easy to use and has rich features. Components and modules, including forms, pop-up windows, navigation, menus, etc. The autocomplete component can help us implement intelligent prompts when searching and provide a better user experience. This article will introduce in detail how to use Layui's autocomplete component to implement the search function, and provide specific code examples.

Step 1: Introduce Layui and jQuery
First, introduce the script files of Layui and jQuery in HTML. You can download the latest version of Layui from the Layui official website (https://www.layui.com/) and extract it into the project. Then, introduce the following two script files into HTML:

<script src="path/to/jquery.min.js"></script>
<script src="path/to/layui.js"></script>

Step 2: Create a search box and result container
Create an input box and a container for displaying search results in HTML. For example:

<input type="text" id="searchInput" autocomplete="off" lay-verify="required" placeholder="请输入搜索内容" class="layui-input">
<div id="searchResult" class="search-result"></div>

Among them, searchInput is the id of the input box, and searchResult is the id of the result container.

Step 3: Write JavaScript code
Call Layui’s autocomplete component in JavaScript to implement the search function. First, introduce the auto-complete module through the layui.use() method and initialize it:

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);
    }
  });
});

Among them, the elem parameter specifies the selector of the input box, ## The #url parameter specifies the address of the search interface. These parameters can be modified according to actual conditions.

In the

onselect callback function, you can perform related operations according to your own needs. For example, you can obtain the data of the prompt item selected by the user through the data parameter, and open the corresponding search results page.

Step 4: Write the background interface code

Write an interface to process search requests in the background and return prompt item data that matches the user's input. The sample code is as follows (taking PHP as an example):

<?php
// 处理搜索请求的接口
$searchKeyword = $_POST['keyword']; // 获取用户输入的关键词

// 根据关键词从数据库或其他数据源中查询符合条件的提示项数据
$result = array(
  array('id' => 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);
?>

In actual projects, you need to modify the implementation of this interface according to your own needs.

Summary:

Through the above steps, we can use Layui's auto-complete component to implement the search function and provide intelligent prompts. In actual projects, it can be customized and expanded according to needs to improve user experience.

The above is the detailed content of How to use Layui to implement automatic search function. For more information, please follow other related articles on the PHP Chinese website!