jquery autocomplete dropdown – Example Display AutoComplete Drop down List on Focus using jQuery

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 create Drop down using autocomplete
 
                

                    Just click to see:
 
                    
                
        
    
 

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.