jquery autocomplete dropdown – Display AutoComplete Drop down List on Focus using jQuery – The AutoComplete() capacity is appended with the textbox control. The custom autocomplete dropdown list is very useful when you want to maintain the design with webpage layout.
jquery autocomplete dropdown – Implement jQuery AutoComplete DropDown (ComboBox)
Show dropdownlist with JQuery Autocomplete suggestions. The AutoComplete() function is attached with the textbox control.
.focus(function() {$(this).autocomplete("search", "");})
Source for the HTML page
How to create a dropdown in jQuery using autocomplete and force selection from list?
index.html
jQuery Drop Down using AutoComplete and minLength of 0 - www.pakainfo.com
Source for the JavaScript file using jQuery
main.js
$(document).ready(function() { var source = ['pakainfo', 'w3school', 'infinityknow', 'w3diy', 'laravel', 'jquery', 'tamilrokers', 'movie']; $("input#autoSuggestPakainfoSearch").autocomplete({ minLength: 0, source: source, autoFocus: true, scroll: true, }).focus(function() { $(this).autocomplete("search", ""); }).live("blur", function(event) { var autocomplete = $(this).data("autocomplete"); var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"); autocomplete.widget().children(".ui-menu-item").each(function() { var item = $(this).data("item.autocomplete"); if (matcher.test(item.label || item.value || item)) { autocomplete.selectedItem = item; return; } }); if (autocomplete.selectedItem) { autocomplete._trigger("select", event, { item: autocomplete.selectedItem }); //there was no match, clear the input } else { $(this).val(''); } }); });
don’t Miss : jquery autocomplete multiple fields with single auto-select request
jQuery UI Autocomplete with Images and Custom HTML in PHP
Create Database Table
CREATE TABLE `members` ( `id` int(11) NOT NULL AUTO_INCREMENT, `member_nm` varchar(25) COLLATE utf8_unicode_ci NOT NULL, `profile` varchar(25) COLLATE utf8_unicode_ci NOT NULL, `image` varchar(150) COLLATE utf8_unicode_ci NOT NULL, `created` datetime NOT NULL, `updated_at` datetime NOT NULL, `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
Autocomplete Textbox – JavaScript Code:
HTML Code:
Database Configuration (dbConfig.php)
connect_error) { die("Connection failed: " . $db->connect_error); }
Autocomplete Data with Images and Custom HTML (getmembers.php)
query($query); $memberData = array(); if($result->num_rows > 0){ while($row = $result->fetch_assoc()){ $name = $row['member_nm'].' '.$row['profile']; $data['id'] = $row['id']; $data['value'] = $name; $data['label'] = ' '.$name.' '; array_push($memberData, $data); } } echo json_encode($memberData);
I hope you get an idea about jquery autocomplete dropdown.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.