Backend Development
PHP Tutorial
PHP combines the jQuery.autocomplete plug-in to implement the function of input auto-complete prompts_PHP tutorial
PHP combines the jQuery.autocomplete plug-in to implement the function of input auto-complete prompts_PHP tutorial
PHP combines with the jQuery.autocomplete plug-in to realize the function of inputting automatic completion prompts
We use the search function in many projects to help users find the information they want faster and more accurately . This article will introduce how to implement the function of automatic prompts for user input, just like the Google and Baidu search engines. When the user enters a keyword, there will be a prompt below the input box, displaying information related to the keyword for the user to choose, which improves the user experience. experience.
This article will use the autocomplete plug-in of jquery ui, combined with back-end PHP, and the data source reads the data of the mysql data table through PHP.
XHTML
First import the jquery library, related ui plug-ins, and css.
The code is as follows:
The jQuery ui plug-in can be downloaded from the official website:
Then write an input box in the body:
The code is as follows:
jQuery
The code is as follows:
$(function(){
$("#key").autocomplete({
source: "search.php",
minLength: 2
});
});
You can understand at a glance that when the autocomplete plug-in is called, the data source comes from search.php. When the user enters 1 character, the data source is called. The autocomplte plugin provides several configurable parameters:
disabled: Whether it is unavailable after the page is loaded. The default is false. There is no need to set this to true. It does not make much sense.
appendTo: append elements to the drop-down prompt box during input, the default is "body".
autoFocus: The default is false. When set to true, the first drop-down prompt box will be selected.
delay: delay time when loading data, the default is 300, in milliseconds.
minLength: When you enter how many characters, a drop-down prompt will appear. The default is 1.
position: Define the position of the drop-down prompt box.
Source: Define the data source. The data source must be in json form. In this example, the data source is obtained by requesting search.php.
autocomplete also provides many events and methods. For details, please check its official website:
PHP
After calling the autocomplete plug-in, there is no prompt effect yet. Don't worry, because you need to call the data source.
First we need a table and add an appropriate amount of data to the table. The structure of the table is as follows:
?
|
CREATE TABLE `art` ( `id` int(11) NOT NULL auto_increment, `title` varchar(100) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 ; |
Please create a table by yourself and add data to table art.
search.php implements the connection to the Mysql database, and based on the input of the front-end user, queries and obtains the matching content in the data table, and then outputs it in JSON form.
?
3 4 5 6
7 8 9 10
12 |
include_once("connect.php"); //Connect to the database
$query=mysql_query("select * from art where title like '$q%' limit 0,10"); //Query the database and form the result set into an array
|
| 1 2 3 4 | .bind("input.autocomplete",function(){ //Fix the bug that FF does not support Chinese language self.search(self.item); }); |
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1677
14
1431
52
1334
25
1279
29
1257
24
PHP and Python: Different Paradigms Explained
Apr 18, 2025 am 12:26 AM
PHP is mainly procedural programming, but also supports object-oriented programming (OOP); Python supports a variety of paradigms, including OOP, functional and procedural programming. PHP is suitable for web development, and Python is suitable for a variety of applications such as data analysis and machine learning.
PHP's Purpose: Building Dynamic Websites
Apr 15, 2025 am 12:18 AM
PHP is used to build dynamic websites, and its core functions include: 1. Generate dynamic content and generate web pages in real time by connecting with the database; 2. Process user interaction and form submissions, verify inputs and respond to operations; 3. Manage sessions and user authentication to provide a personalized experience; 4. Optimize performance and follow best practices to improve website efficiency and security.
Choosing Between PHP and Python: A Guide
Apr 18, 2025 am 12:24 AM
PHP is suitable for web development and rapid prototyping, and Python is suitable for data science and machine learning. 1.PHP is used for dynamic web development, with simple syntax and suitable for rapid development. 2. Python has concise syntax, is suitable for multiple fields, and has a strong library ecosystem.
PHP and Python: A Deep Dive into Their History
Apr 18, 2025 am 12:25 AM
PHP originated in 1994 and was developed by RasmusLerdorf. It was originally used to track website visitors and gradually evolved into a server-side scripting language and was widely used in web development. Python was developed by Guidovan Rossum in the late 1980s and was first released in 1991. It emphasizes code readability and simplicity, and is suitable for scientific computing, data analysis and other fields.
Why Use PHP? Advantages and Benefits Explained
Apr 16, 2025 am 12:16 AM
The core benefits of PHP include ease of learning, strong web development support, rich libraries and frameworks, high performance and scalability, cross-platform compatibility, and cost-effectiveness. 1) Easy to learn and use, suitable for beginners; 2) Good integration with web servers and supports multiple databases; 3) Have powerful frameworks such as Laravel; 4) High performance can be achieved through optimization; 5) Support multiple operating systems; 6) Open source to reduce development costs.
PHP's Impact: Web Development and Beyond
Apr 18, 2025 am 12:10 AM
PHPhassignificantlyimpactedwebdevelopmentandextendsbeyondit.1)ItpowersmajorplatformslikeWordPressandexcelsindatabaseinteractions.2)PHP'sadaptabilityallowsittoscaleforlargeapplicationsusingframeworkslikeLaravel.3)Beyondweb,PHPisusedincommand-linescrip
PHP vs. Python: Use Cases and Applications
Apr 17, 2025 am 12:23 AM
PHP is suitable for web development and content management systems, and Python is suitable for data science, machine learning and automation scripts. 1.PHP performs well in building fast and scalable websites and applications and is commonly used in CMS such as WordPress. 2. Python has performed outstandingly in the fields of data science and machine learning, with rich libraries such as NumPy and TensorFlow.
The Continued Use of PHP: Reasons for Its Endurance
Apr 19, 2025 am 12:23 AM
What’s still popular is the ease of use, flexibility and a strong ecosystem. 1) Ease of use and simple syntax make it the first choice for beginners. 2) Closely integrated with web development, excellent interaction with HTTP requests and database. 3) The huge ecosystem provides a wealth of tools and libraries. 4) Active community and open source nature adapts them to new needs and technology trends.
