Mapping values with autocomplete textbox data by jQuery

Suppose, when selecting a text in autocomplete textbox, if the user needs to perform any database operation, it requires id of the selected text to retrieve corresponding data from database. But when selecting the value from autocomplete textbox, user needs to view text instead of values.

This post will help you to map values corresponding to each text provided in autocomplete textbox.

Let us consider a scenario like, we have list of options in select box whose corresponding values are provided in it. Instead of displaying select (drop-down) box which is not more user-friendly to suggest your texts, let us provide a textbox with autocomplete enables. Let us retriev corresponding values in select function for the selected text.

Following is the select (drop-down) box which contains values corresponding to its text:

        <select id="languages" style="display: none;">
            <option value="1">C</option>
            <option value="2">C++</option>
            <option value="3">Java</option>
            <option value="4">PHP</option>
            <option value="5">Python</option>
            <option value="6">Cobol</option>
            <option value="7">.NET</option>
            <option value="8">Oracle</option>
            <option value="9">DB2</option>
            <option value="10">MySQL</option>
            <option value="11">MS SQL Server</option>
            <option value="12">Derby</option>
            <option value="13">Cassandra</option>
            <option value="14">HBase</option>
            <option value="15">BigData</option>
        </select>

In jQuery or javascript, we cannot create a map with key and value pair as simple as other languages like Java, etc.

So, let us have an array with key=value format, where key is our value attribute in option tag and value is the innerHTML of option tag.

Following is the code snippet which creates array with key=value format.

        var availableTags = [];
        var tagsWithValues = [];

        $("#languages option").each(function() {
            availableTags.push($(this).text());
            tagsWithValues.push($(this).val() + "=" + $(this).text());
        });

In select function of autocomplete, let us iterate this array and can retrieve the value of corresponding selected text in autocomplete suggestion textbox.

Following is the code snippet which gets value of corresponding selected text:

        $("#suggestions").autocomplete({
            source : availableTags,
            select : function(event, ui) {
				var value = "";
				for ( var i = 0; i < tagsWithValues.length; i++) {
					values = null;
					values = tagsWithValues[i].split("=");
					if (values[1] == ui.item.value) {
						value = values[0];
					}
				}
				alert("You have selected : " + ui.item.value + ".\n Its value is " + value);
				$("#suggestions").val(ui.item.value);
				return false;
			},
			delay : 0
		});

Following is the entire HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Autocomplete in jQuery</title>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

<style>
.ui-widget {
    font-size: 12px;
}

.frame {
    left: 150px;
    top: 150px;
    width: 500px;
    border: #e6e6e6 solid 1px;
    position: absolute;
    align: center;
    padding: 10px;
}
</style>

<script type="text/javascript">

    $(function() {
        $.extend($.ui.autocomplete.prototype, {
            _renderItem : function(ul, item) {
                var term = this.element.val(), html = item.label.replace(term,
                        "<b>" + term + "</b>");
                return $("<li></li>").data("item.autocomplete", item).append(
                        $("<a></a>").html(html)).appendTo(ul);
            }
        });

        var availableTags = [];
        var tagsWithValues = [];

        $("#languages option").each(function() {
            availableTags.push($(this).text());
            tagsWithValues.push($(this).val() + "=" + $(this).text());
        });

        $("#suggestions").autocomplete({
            source : availableTags,
            select : function(event, ui) {
				var value = "";
				for ( var i = 0; i < tagsWithValues.length; i++) {
					values = null;
					values = tagsWithValues[i].split("=");
					if (values[1] == ui.item.value) {
						value = values[0];
						break;
					}
				}
				alert("You have selected : " + ui.item.value + ".\n Its value is " + value);
				$("#suggestions").val(ui.item.value);
				return false;
			},
			delay : 0
		});
	});
</script>

</head>
<body>

    <div>
        <select id="languages" style="display: none;">
            <option value="1">C</option>
            <option value="2">C++</option>
            <option value="3">Java</option>
            <option value="4">PHP</option>
            <option value="5">Python</option>
            <option value="6">Cobol</option>
            <option value="7">.NET</option>
            <option value="8">Oracle</option>
            <option value="9">DB2</option>
            <option value="10">MySQL</option>
            <option value="11">MS SQL Server</option>
            <option value="12">Derby</option>
            <option value="13">Cassandra</option>
            <option value="14">HBase</option>
            <option value="15">BigData</option>
        </select>

        <div>
            <input
                id="suggestions">
        </div>
    </div>

</body>
</html>

Share This Post

Related Articles

Leave a Reply

© 2017 Techy Diary. All rights reserved.
Powered by Charvi Groups