Jquery Autocomplete Combo with Scrollable Results

Whoever is in search of a basic business class combo box with autocomplete option might feel this article as handy.

The idea came to me after my search goes in vain for finding a jQuery combo with scrollable results.

You can find jquery autocomplete combo here.

You can find jquery autocomplete textbox with scrollable results here.

But if you need a autocomplete combo with scrollable results you can make use of the below code.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoCompleteEx.aspx.cs"

Inherits="jQueryUIDemos.Demo11.AutoCompleteEx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

.ui-autocomplete.ui-menu

{

opacity: 0.5;

}

.ui-autocomplete

{

max-height: 100px;

overflow-y: auto; /* prevent horizontal scrollbar */

overflow-x: hidden; /* add padding to account for vertical scrollbar */

padding-right: 20px;

}

/* IE 6 doesn't support max-height

* we use height instead, but this forces the menu to always be this tall

*/

* html .ui-autocomplete

{

height: 100px;

}

.ui-button

{

margin-left: -16px;

}

/* <TODO:SG>: Fixes the icon size with the scrool bar length */

button.ui-button-icon-only

{

width: 1.2em;

}

.ui-button-icon-only .ui-button-text

{

padding: 0.35em;

}

.ui-autocomplete-input

{

margin: 0;padding: 0.48em 0 0.47em 0.45em;

}

</style>

(function ($) {

$.widget("ui.combobox", {

_create: function () {

var self = this,

select = this.element.hide(),

selected = select.children(":selected"),

value = selected.val() ? selected.text() : "";var input = this.input = $("<input>")

.insertAfter(select)

.val(value)

.autocomplete({

delay: 0,

minLength: 0,

source: function (request, response) {

var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");

response(select.children("option").map(function () {

var text = $(this).text();

if (this.value && (!request.term || matcher.test(text)))return {

label: text.replace(

new RegExp(

"(?![^&;]+;)(?!<[^<>]*)(" +

$.ui.autocomplete.escapeRegex(request.term) +

")(?![^<>]*>)(?![^&;]+;)", "gi"

), "<strong>$1</strong>"),

value: text,

option: this

};

}));

},

select: function (event, ui) {

ui.item.option.selected = true;

self._trigger("selected", event, {

item: ui.item.option

});

},

change: function (event, ui) {

if (!ui.item) {

var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),

valid = false;

select.children("option").each(function () {

if ($(this).text().match(matcher)) {

this.selected = valid = true;return false;

}

});

if (!valid) {

// remove invalid value, as it didn't match anything

$(this).val("");

select.val("");

input.data("autocomplete").term = "";return false;

}

}

}

})

.addClass("ui-widget ui-widget-content ui-corner-left");

input.data("autocomplete")._renderItem = function (ul, item) {

return $("<li></li>")

.data("item.autocomplete", item)

.append("<a>" + item.label + "</a>")

.appendTo(ul);

};

this.button = $("<button type='button'> </button>")

.attr("tabIndex", -1)

.attr("title", "Show All Items")

.insertAfter(input)

.button({

icons: {

primary: "ui-icon-triangle-1-s"

},

text: false

})

.removeClass("ui-corner-all")

.addClass("ui-corner-right ui-button-icon")

.click(function () {

// close if already visible

if (input.autocomplete("widget").is(":visible")) {

input.autocomplete("close");

return;

}

// work around a bug (likely same cause as #5265)

$(this).blur();

// pass empty string as value to search for, displaying all results

input.autocomplete("search", "");

input.focus();

});

},

destroy: function () {

this.input.remove();

this.button.remove();

this.element.show();

$.Widget.prototype.destroy.call(this);

}

});

})(jQuery);

$(function () {

$("#combobox").combobox();

$("#toggle").click(function () {$("#combobox").toggle();

});

});

</script> </head>

<body>

<h1>

jQuery AutoComplete Combo with Scrollable Results

</h1>

<br />

<label>

Your preferred programming language:

</label>

<option value="">Select one...</option>

<option value="ActionScript">ActionScript</option>

<option value="AppleScript">AppleScript</option>

<option value="BASIC">BASIC</option>

<option value="Clojure">Clojure</option>

<option value="COBOL">COBOL</option>

<option value="ColdFusion">ColdFusion</option>

<option value="Erlang">Erlang</option>

<option value="Fortran">Fortran</option>

<option value="Groovy">Groovy</option>

<option value="Haskell">Haskell</option>

<option value="JavaScript">JavaScript</option>

<option value="Python">Python</option>

<option value="Scala">Scala</option>

<option value="Scheme">Scheme</option>

</select>

</div>

</div>

</form> </body>

</html>

The changes i have done after properly merging those two links mentioned above.

/* <TODO:SG>: Fixes the icon size with the scrool bar length */

button.ui-button-icon-only

{

width: 1.2em;

}

The width needs to be properly set to fix the arrow button align with the scroll results vertical scroll bar.

.ui-button

{

margin-left: -16px;

}

The margin-left needs to be properly set to fix the button on top of the input textbox rather than next to the textbox. This change is need to make the results vertical scrollbar to be in sync with the button on the input textbox.

Issues faced:

The issue you will be facing is when the user types the long text which will go behind the arrow mark. I am working this to fix this and once i found the solution i will update the article.

Summary:

This is a very basic version of the Combo with Scrollable. If you want some advanced you can find plenty of stuffs.

Senthil Gandhi