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

<html>
<head>
    <title>jQuery Drop Down using AutoComplete and minLength of 0 - www.pakainfo.com</title>
 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <STYLE TYPE="text/css" media="all">
        .ui-autocomplete { 
            position: absolute; 
            cursor: default; 
            height: 150px; 
            overflow-y: scroll; 
            overflow-x: hidden;
        }
    </STYLE>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="main.js"></script>
 
</head>
<body>
 
    <form id="jQueryAutocomplete">
        <fieldset>
            <legend>jQuery create Drop down using autocomplete</legend>
 
                <p>
                    <label for="autoSuggestPakainfoSearch">Just click to see:</label>
 
                    <input id="autoSuggestPakainfoSearch" type="text" name="autoSuggestPakainfoSearch" />
                </p>
        </fieldset>
    </form>
 
</body>
</html>

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

Read Also:  convert mysql date to dd mm yyyy format in php - How to change date format in PHP?

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:

<script src="jquery-ui/jquery/jquery.min.js"></script>

<link rel="stylesheet" href="jquery-ui/jquery-ui.css">
<script src="jquery-ui/jquery-ui.js"></script>

<script>
$(document).ready(function(){
    $("#userQuery").autocomplete({
        source: "getmembers.php",
        minLength: 1,
        select: function(event, ui) {
            $("#userQuery").val(ui.item.value);
            $("#memberID").val(ui.item.id);
        }
    }).data("ui-autocomplete")._renderItem = function( ul, item ) {
    return $( "<li class='ui-autocomplete-row'></li>" )
        .data( "item.autocomplete", item )
        .append( item.label )
        .appendTo( ul );
    };
});
</script>

HTML Code:

<input id="userQuery" placeholder="Enter member name..." autocomplete="off">
 
<input type="hidden" id="memberID" name="memberID" value=""/>

Database Configuration (dbConfig.php)

<?php
$dbHost     = "localhost";
$dbUsername = "amihkj78";
$dbPassword = "D4d#$djd8544";
$dbName     = "pakainfo_v1";

$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}

Autocomplete Data with Images and Custom HTML (getmembers.php)

<?php
require_once 'dbConfig.php';
        
$searchTerm = $_GET['term'];

$query = "SELECT id, member_nm, profile, image FROM members WHERE (member_nm LIKE '%".$searchTerm."%' OR profile LIKE '%".$searchTerm."%') AND status = '1' ORDER BY member_nm ASC";
$result = $db->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'] = '
        <a href="javascript:void(0);">
            <img src="images/members/'.$row['image'].'" width="50" height="50"/>
            <span>'.$name.'</span>
        </a>';
        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.