Click here to Skip to main content
15,867,308 members
Articles / Auto-complete
Article

Jquery Autocomplete Combo with Scrollable Results

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
11 Oct 2013CPOL4 min read 20.1K   1  
Jquery Autocomplete Combo with Scrollable ResultsWhoever is in search of a basic business class combo box with autocomplete option might feel

This articles was originally at wiki.asp.net but has now been given a new home on CodeProject. Editing rights for this article has been set at Bronze or above, so please go in and edit and update this article to keep it fresh and relevant.

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">

<head id="Head1" runat="server">

<title></title>

<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />

<link href="../themes/blitzer/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" />

<style type="text/css">

.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>

<script type="text/javascript" src="../Scripts/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../Scripts/jquery-ui-1.8.5.custom.min.js"></script>

<script type="text/javascript">

(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'>&nbsp;</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>

<form id="form1" runat="server">

<h1>

jQuery AutoComplete Combo with Scrollable Results

</h1>

<br />

<div id="contextDiv">

<div class="demo">

<div class="ui-widget">

<label>

Your preferred programming language:

</label>

<select id="combobox">

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

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

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

<option value="Asp">Asp</option>

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

<option value="C">C</option>

<option value="C++">C++</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="Java">Java</option>

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

<option value="Lisp">Lisp</option>

<option value="Perl">Perl</option>

<option value="PHP">PHP</option>

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

<option value="Ruby">Ruby</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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, googlinglive-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.

The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.
This is a Collaborative Group

755 members

Comments and Discussions

 
-- There are no messages in this forum --