Morioh
Login
Iliana Welch

Iliana Welch

1 year ago

How to Create an AutoComplete Dropdown List with jQuery

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('');
}
});
});

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.

#jquery 

How to Create an AutoComplete Dropdown List with jQuery
1.15 GEEK