The Autocomplete textbox<\/b> allows the user to quickly find and select a value from the pre-populated option list. It displays the suggestions automatically while the user types into the field. Using the jQuery UI Autocomplete plugin, you can easily add an autocomplete textbox on the website. The jQuery UI Autocomplete<\/b> plugin converts the input field into an Autocomplete. When the user typing in the autocomplete input field, this plugin starts searching for matched values and lists them to choose from.<\/p>\n
Autocomplete textbox provides a user-friendly way to add a search input field with auto-suggestions dropdown<\/b> in the web application. It is very useful when you want to populate suggestions from the database when the user starts typing in the input field. In this tutorial, we will show you how to implement Autocomplete textbox and display suggestions from the database using jQuery, PHP, and MySQL.<\/p>\n
The example code will implement an auto-suggestions input field<\/b> for skills search. The autosuggestion options will be fetched from the database and listed under the textbox while the user starts typing in the textbox.<\/p>\nCreate Database Table<\/h2>\n
To store the autosuggestions data a table needs to be created in the database. The following SQL creates a The following code attaches a autocomplete suggestion box to the input field with the jQuery UI plugin.<\/p>\n jQuery UI Autocomplete Plugin:<\/b> Initialize Autocomplete:<\/b> HTML Input Element:<\/b> The The autocomplete()<\/b> method makes a GET request to the source URL and added a query string with a term field. So, you can get the search term using PHP GET method. The following PHP code, fetch the records from the MySQL database (skills table) and filter the records by On form submission, the selected item value is sent to the server-side for autocomplete input field. If you want to get the ID of the selected value, you need to replace the input field value with item ID.<\/p>\n Various configuration options are available to customize the jQuery UI Autocomplete plugin<\/b> functionality. Some useful configuration options of the Autocomplete plugin are given below.<\/p>\nskills<\/code> table with some basic fields in the MySQL database.<\/p>\nCREATE<\/span> TABLE<\/span> `skills`<\/span> (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span> AUTO_INCREMENT,\r\n `name`<\/span> varchar<\/span>(100<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `status`<\/span> tinyint(1<\/span>) NOT<\/span> NULL<\/span> DEFAULT<\/span> 1<\/span> COMMENT<\/span> '1=Active | 0=Inactive'<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE<\/span>=InnoDB<\/span> DEFAULT<\/span> CHARSET<\/span>=utf8 COLLATE<\/span>=utf8_unicode_ci;<\/pre>\nAutocomplete Search Input Field<\/h2>\n
\nInclude the jQuery and jQuery UI library files to use the Autocomplete plugin.<\/p>\n<!-- jQuery library --><\/span>\r\n<script<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n\r\n<!-- jQuery UI library --><\/span>\r\n<link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.13.2\/themes\/smoothness\/jquery-ui.css\"<\/span>><\/span>\r\n<script<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.13.2\/jquery-ui.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\n
\nThe autocomplete()<\/code> function initialize the Autocomplete plugin.<\/p>\n\n
#skill_input<\/code>) of the input field element where autocomplete feature will be attached.<\/li>\nfetchData.php<\/code>) to retrieve the data for auto-suggestions.<\/li>\n<\/ul>\n<script<\/span>><\/span>\r\n$(function<\/span>(<\/span>) <\/span>{\r\n $(\"#skill_input\"<\/span>).autocomplete({\r\n source: \"fetchData.php\"<\/span>,\r\n });\r\n});<\/span>\r\n<\/script<\/span>><\/span><\/pre>\n
\nInitially, an input text field is provided to enter the skills.<\/p>\n\n
autocomplete()<\/code> method.<\/li>\n<div<\/span> class<\/span>=\"form-group\"<\/span>><\/span>\r\n <label<\/span>><\/span>Programming Language:<\/label<\/span>><\/span>\r\n <input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=\"skill_input\"<\/span> placeholder<\/span>=\"Start typing...\"<\/span>><\/span>\r\n<\/div<\/span>><\/span><\/pre>\nFetch Autocomplete Data from Database with PHP and MySQL (fetchData.php)<\/h2>\n
fetchData.php<\/code> file is called by the autocomplete()<\/b> method of Autocomplete plugin. This file retrieves the skills data based on the search term and returns data as a JSON encoded array using PHP and MySQL.<\/p>\n$_GET['term']<\/code>. The filtered skill data returned to autocomplete() method as a JSON encoded array.<\/p>\n<?php
<\/span>\/\/ Database configuration
<\/span>$dbHost <\/span>= <\/span>\"localhost\"<\/span>;
<\/span>$dbUsername <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbPassword <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbName <\/span>= <\/span>\"codexworld\"<\/span>;
<\/span>\/\/ Create database connection
<\/span>$db <\/span>= new <\/span>mysqli<\/span>(<\/span>$dbHost<\/span>, <\/span>$dbUsername<\/span>, <\/span>$dbPassword<\/span>, <\/span>$dbName<\/span>);
<\/span>\/\/ Check connection
<\/span>if (<\/span>$db<\/span>-><\/span>connect_error<\/span>) {
die(<\/span>\"Connection failed: \" <\/span>. <\/span>$db<\/span>-><\/span>connect_error<\/span>);
}
<\/span>\/\/ Get search term
<\/span>$searchTerm <\/span>= <\/span>$_GET<\/span>[<\/span>'term'<\/span>];
<\/span>\/\/ Fetch matched data from the database
<\/span>$query <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>\"SELECT * FROM skills WHERE name LIKE '%\"<\/span>.<\/span>$searchTerm<\/span>.<\/span>\"%' AND status = 1 ORDER BY name ASC\"<\/span>);
<\/span>\/\/ Generate array with skills data
<\/span>$skillData <\/span>= array();
if(<\/span>$query<\/span>-><\/span>num_rows <\/span>> <\/span>0<\/span>){
while(<\/span>$row <\/span>= <\/span>$query<\/span>-><\/span>fetch_assoc<\/span>()){
<\/span>$data<\/span>[<\/span>'id'<\/span>] = <\/span>$row<\/span>[<\/span>'id'<\/span>];
<\/span>$data<\/span>[<\/span>'value'<\/span>] = <\/span>$row<\/span>[<\/span>'name'<\/span>];
<\/span>array_push<\/span>(<\/span>$skillData<\/span>, <\/span>$data<\/span>);
}
}
<\/span>\/\/ Return results as json encoded array
<\/span>echo <\/span>json_encode<\/span>(<\/span>$skillData<\/span>);
<\/span>?><\/span><\/pre>\nReplace Input Value with ID<\/h2>\n
$(function<\/span>(<\/span>) <\/span>{\r\n $(\"#skill_input\"<\/span>).autocomplete({\r\n source: \"fetchData.php\"<\/span>,\r\n select: function<\/span>( event, ui <\/span>) <\/span>{\r\n event.preventDefault();\r\n $(\"#skill_input\"<\/span>).val(ui.item.id);\r\n }\r\n });\r\n});<\/pre>\nAutocomplete Widget Options<\/h2>\n
\n
source<\/code> \u2013 Required. The source must be specified from where the data will be fetched for suggestions list. You can specify the local or remote source.\n\n
[ \"Choice1\", \"Choice2\" ]<\/code> OR [ { label: \"Choice1\", value: \"value1\" }, { label: \"Choice2\", value: \"value2\" }, ... ]<\/code>\n$<\/span>( \".selector<\/span>\" ).autocomplete({\r\n source: [ \"PHP\"<\/span>, \"Python\"<\/span>, \"Ruby\"<\/span>, \"JavaScript\"<\/span>, \"MySQL\"<\/span>, \"Oracle\"<\/span> ]\r\n});\r\n<\/pre>\n<\/li>\nhttp:\/\/example.com<\/code>\n$<\/span>( \".selector<\/span>\" ).autocomplete({\r\n source: \"http:\/\/example.com\"<\/span>\r\n});\r\n<\/pre>\n<\/li>\n<\/ul>\n<\/li>\nminLength<\/code> \u2013 Optional (Default 1). The minimum number of characters that must type before the search is performed.\n$<\/span>( \"