Click here to Skip to main content
Click here to Skip to main content

Alternative for Ajax AutoComplete Control

, 23 May 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Alternative for AutoComplete control without Ajax and Webservices

Introduction

We already have a lot of controls which use AjaxToolkit or JQuery UI Combobox or AutoComplete Textboxes from different 3rd party controls. But, if we have a limitation of not using these above mentioned controls, then I suppose we would be in a state of confusion about achieving our targets. This was the exact situation I got from one of our CodeProject member.

Background

The basic idea of this is to get the list of data that the auto complete textbox is supposed to get it from the database by using ADO.NET or LINQ or your normally preferred DB call on the page load, for the first time itself. And, now save it to a hidden variable and play with it as per our requirements.

Using the Code

Let's go through my example here.

This is the HTML content first.

// Hidden source. Provide the JSON data on the page load for the first time, 
// I've taken some example data.
<input type='hidden' value='{"100":one,"200":two,"300":
three,"400":four,"500":our}' id='hdnVal'/>
// Auto complete Text box 
 <input type='text' id='txtEnter' /><br /> 
// Hidden DIV and Select control to update whenever a key is entered into the textbox
<div id='divAreaHolder' style='display:none; border: black 0px solid; 
heigth:30px; width: 200px; overflow-y:auto;'>
    <select id='sltOptions'></select>
</div> 

This is simple HTML code which contains:

  1. input (type=hidden) to hold the data,
  2. input textbox for us to enter a text and
  3. Dropdownlist which holds the relevant data that matches the user entered text

The below jQuery code takes the data entered into the textbox and will call the GetAutoHelp method.

var arrData; 
$('#txtEnter').keyup(function () {  
    $('#sltOptions').find('option').remove().end(); 
    if ($(this).val() === '') {                    
	$('#divAreaHolder').hide();          
	return false; 
    } else { 
        arrData = $('#hdnVal').val().replace('{', '').replace('}', '').split(",");
        GetAutoHelp($(this).val());
    }
}); 

The below function is to do the manipulation on the hidden data source to get the options that are similar to the text entered into the Autocomplete textbox.

function GetAutoHelp(txt) {
    var flag = 0;
    var $opn;
    $('#divAreaHolder').show();
    $opn = new Option('--Select--', '0');
    $('#sltOptions').append($opn);

    $(arrData).each(function () {
        if (this.contains(txt)) {
            $opn = new Option($.trim(this).split(':')[1], $.trim(this).split(':')[0]);
            $('#sltOptions').append($opn);
            flag = 1;
        }
    });

// If no data found, update the textarea with No data Found information/option
    if (flag === 0) {
        $('#sltOptions').find('option').remove().end();
        $opn = new Option('--No Options--', '0');
        $('#sltOptions').append($opn);
   }
} 

The below jQuery code is to set the selected option's value into the auto complete textbox when selected from the Dropdownlist's option.

// On change of the Select option, set the textbox with the selected value
$("select").change(function () { 
    //alert($('select option:selected').val());
    if ($('select option:selected').val() === 0) return;
    else $('#txtEnter').val($('select option:selected').text());
});

Limitations: If the data list is too big/high, then the server might take some time to load the page.

Hope this helps you all.

Thank you.

License

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

Share

About the Author

RelicV
Software Developer
India India
I like programming and I hate bad coding.

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web01 | 2.8.141015.1 | Last Updated 23 May 2013
Article Copyright 2013 by RelicV
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid