This example I have asked for iust to keep it easy to use as the user will write down frequently to increase the select options as much as he can. There is a great way of jQuery UI api auto complete that I always fond of but for the time being I just wanted a little try without going to that integration hassle. Any up gradation or performance boost suggestion is always appreciable.
All that going in here is you just need to put randomly select options and after then a sorted list item will be shown for the auto complete suggestion task. As you select an item from list it will automatically update the select option to selected accordingly.
For DOM manipulation and avoiding any conflict, selectors or elements should refer to the parent element or selector for best practices.
All that going in here is you just need to put randomly select options and after then a sorted list item will be shown for the auto complete suggestion task. As you select an item from list it will automatically update the select option to selected accordingly.
For DOM manipulation and avoiding any conflict, selectors or elements should refer to the parent element or selector for best practices.
//Here is the code of simple jQuery Autocomplete//
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeOut demo</title>
<script src="jquery-2.0.2" ></script>
<script src="jquery-2.0.2.min.js" ></script>
<style>
select
{
display:none;
}
input[ type= "text"]
{
border:1px solid #999999;
width:120px;
}
ul
{
width:120px;
height:300px;
list-style:none;
margin:0;
padding:0;
display:none;
border:1px solid #999999;
overflow-y:scroll;
}
ul.auto
{
height:auto;
overflow-y:auto;
}
ul li
{
padding:0 0 5px 0;
}
ul li.active
{
background: #999999;
}
</style>
</head>
<body>
<!--
Wrap all the things inside your custom block. I wrapped all inside a div of class name "mcac". Though I didn't use it in here as a reference of the child elements or selectors but avoiding any jQuery DOM conflict use all selectors or elements regarding this parent class or your custom one.
//-->
<div class="mcac">
<select>
<option>Xinxian</option>
<option>Peru</option>
<option>Iceland</option>
<option>Japan</option>
<option>India</option>
<option>Bangladesh</option>
<option>Keniya</option>
<option>Latvia</option>
<option>Newzealand</option>
<option>Oman</option>
<option>Quinceland</option>
<option>Russia</option>
<option >Spain</option>
<option>Tibbet</option>
<option>Uganda</option>
<option>Vietnam</option>
<option>West Indies</option>
<option>Parague</option>
<option>Denmark</option>
<option>Ethiopia</option>
<option>Yasakhi</option>
<option>France</option>
<option>Mojambik</option>
<option>Volibia</option>
<option>Chilie</option>
<option>Brazil</option>
<option>America</option>
<option>Costarica</option>
<option>Australia</option>
<option>Malaysia</option>
<option>Maldives</option>
<option>Germany</option>
<option>Mongolia</option>
<option>Nicaragua</option>
<option>Mozambik</option>
<option>Mariana Island</option>
<option>Miyanmar</option>
</select>
<div>
<input />
<button>List</button>
<ul></ul>
</div>
</div>
<script>
$(document).ready(function(){
<!-- sorting the select option items and rearranging them //-->
var sortingOptions = $("select option");
sortingOptions.sort(function(a, b) {
if (a.text > b.text) {
return 1;
}
else if (a.text < b.text) {
return -1;
}
else {
return 0
}
});
<!-- appending the sorted select option items into list items //-->
sortingOptions.each(function() {
$("div ul").append("<li>"+$(this).text()+"</li>");
});
var listL; //list items length//
var listLCD = 0; //list length counter keydown
var listLCU; //list length counter keyup
var listLCE; // list lengthcounter mouseenter
var listLF = 0; // list length flag interaction between keyup, keydown and mouseenter
var listU; // jQuery object variable for ul li.
var F = 0; // Flag to interact between keyup, keydown and input box
var inputNonChar = 0; // Flag for non characters
<!-- Initializing to count list items //-->
$("button").click(function(){
listU = $("ul li").filter(":visible");
update(listU);
})
<!-- Initializing to count list items while click to the input box //-->
$("input").click(function(){
$("ul").filter(":visible").show();
$("ul").filter(":hidden").fadeToggle();
listU = $("ul li").filter(":visible");
update(listU);
<!-- Checking user character keys and scanning them comparing with the list items. While the matches found it will show the items otherwise items will be hidden//-->
}).keyup(function(e){
if((e.keyCode != 40) || (e.keyCode != 38)){
var inputValue = $(this).val();
var patt = new RegExp("\\b"+inputValue, "i");
var patt1 = /[^A-Za-z\s]/gi;
$("ul li").each(function(){
if(!patt.test($(this).text())){
if(!F){
$(this).hide();
listU = $("ul li").filter(":visible");
update(listU);}
}
if(patt.test($(this).text())){
$(this).show();
}
if(($(this).text() == inputValue) ||
($(this).text().toLowerCase() == inputValue) ||
($(this).text().toUpperCase() == inputValue)){
if(!F){
updateSelect($(this).text());
$(this).hide();
listU = $("ul li");
update(listU);
}
}
});
if(inputValue == ""){
listU = $("ul li");
update(listU);
if($("ul").is(".auto")){
$("ul.auto").removeClass("auto").show();
}
else{
$("ul").show();
}
}
if($("ul li").filter(":visible")
.length != ($("ul li").length)){
$("ul").addClass("auto").show();
}
if($("ul li").filter(":visible")
.length == 0){
if($("ul").is(".auto")){
$("ul.auto").removeClass("auto");
$("ul").hide();
}
else{
$("ul").hide();
}
}
if(inputValue.match(patt1)){
var x = $("input").val();
var y = /[A-Za-z\s]/gi;
var z = x.match(y, x);
if(!z){
$("input").val("");
}
else{
var p = z.join("");
$("input").val(p);
}
$("input").val(p);
}
}
<!-- Visible items scrolling using Up and Down keys and Enter key to choose the specific item //-->
}).keydown(function(e){
var temp = e.keyCode;
if((temp == 40) || (temp == 38)){
F = 1;
}
if(( temp != 40) && ( temp != 38)){
F = 0;
$("ul li.active").removeClass("active");
}
if(temp == 40){
if(listLF == 0){
$("ul li.active").removeClass("active");
$("ul li").filter(":visible").eq(listLCD).addClass("active");
$(this).val($("ul li.active").text());
if(listLCD == 0){
listLCU = (listL - 1);
}
else{
listLCU = (listLCD - 1);
}
listLCD += 1;
if(listLCD == listL){
listLCD = 0;
}
}
if(listLF == 1){
if(listLCE == (listL -1)){
$("ul li.active").removeClass("active");
$("ul li").filter(":visible").eq(listLCD).addClass("active");
$(this).val($("ul li.active").text());
if(listLCD == 0){
listLCU = (listL-1);
}
listLCD += 1;
listLF = 0;
}
else{
$("ul li.active").removeClass("active");
$("ul li").filter(":visible").eq(listLCE+1).addClass("active");
$(this).val($("ul li.active").text());
listLCU = listLCE;
listLCD = (listLCE+2);
if((listLCE+2) == listL){
listLCD = 0;
}
listLF = 0;
}
}
}
if(temp == 38){
if(listLF == 0){
$("ul li.active").removeClass("active");
$("ul li").filter(":visible").eq(listLCU).addClass("active");
$(this).val($("ul li.active").text());
if(listLCU == (listL - 1)){
listLCD = 0;
}
else{
listLCD = (listLCU+1);
}
listLCU -= 1;
if(listLCU == ( - 1)){
listLCU = (listL - 1);
}
}
if(listLF == 1){
if(listLCE == 0){
listLCU = (listL -1);
$("ul li.active").removeClass("active");
$("ul li").filter(":visible").eq(listLCU).addClass("active");
$(this).val($("ul li.active").text());
listLCU -= 1;
listLF = 0;
}
else{
$("ul li.active").removeClass("active");
$("ul li").filter(":visible").eq(listLCE - 1).addClass("active");
$(this).val($("ul li.active").text());
listLCU = (listLCE - 2);
listLCD = listLCE;
listLF = 0;
}
}
}
if(temp == 13){
$("ul li.active").removeClass("active");
listU = $("ul li");
update(listU);
F = 0;
}
});
<!-- Click events causes to show or hide the popup list //-->
$(document).click(function(e){
if($(e.target).is("input") || $(e.target).is("button")){
if(($("input").val() == "") && $(e.target).is("button")){
$("ul").fadeToggle();
}
if($("input").val() != ""){
var temp = 0;
$("ul li").each(function(){
if(($(this).text() == $("input").val()) ||
($(this).text().toLowerCase() == $("input").val()) ||
($(this).text().toUpperCase() == $("input").val())){
temp = 1;
}
});
if((temp == 1) && $(e.target).is("input")){
if($("ul").is(".auto")){
$("ul").removeClass("auto");
$("ul").show();
$("ul li").show();
}
else{
$("ul").show();
$("ul li").show();
}
}
if((temp == 1) && $(e.target).is("button")){
if($("ul").is(".auto")){
$("ul").removeClass("auto");
$("ul").fadeToggle();
$("ul li").show();
}
else{
$("ul").fadeToggle();
$("ul li").show();
}
}
if(temp == 0){
$("input").val("");
if(($("ul").is(".auto")) && ($("ul").is(":visible"))){
$("ul").removeClass("auto");
$("ul").show();
$("ul li").show();
}
else if($("ul").is(".auto") && $("ul").is(":hidden")){
$("ul").removeClass("auto");
$("ul").show();
$("ul li").show();
}
else{
$("ul").show();
$("ul li").show();
}
}
}
}
else{
$("ul").filter(":visible").fadeOut();
}
});
<!-- Funtion that will determine the visible list items total length and interaction the items through mouseenter event//-->
function update(getListU){
listL = getListU.length;
listLCU = (listL -1);
getListU.each(function(i,e){
$(this).mouseenter(function(){
$("ul li.active").removeClass("active");
$(this).addClass("active");
listLCE = i;
listLF = 1;
listLCD = 0;
listLCU = 0;
}).mouseleave(function(){
$("ul li.active").removeClass("active");
listLCE = 0;
listLF = 0;
listLCD = 0;
listLCU = (listL -1);
}).click(function(){
$("input").val($(e).text());
updateSelect($(e).text())
listLCE = 0;
$(this).parent().hide();
if(F == 1){
F = 0;
}
listLF = 0;
});
});
}
<!-- Option will be selected regarding the list item selection //-->
function updateSelect(getText){
$("select option").each(function() {
if($(this).attr("selected")){
$(this).attr("selected", false);
}
if(($(this).text() == getText) ||
($(this).text().toLowerCase() == getText) ||
($(this).text().toUpperCase() == getText)){
$(this).attr("selected", "selected");
}
});
}
});
</script>
</body>
</html>
Hope this autocomplete will help you much. Any suggestion is highly appreciable.
saifulmasud
[email protected]
9th September 2014