Skip to main content

jQuery Autocomplete via TextArea

It is always desirable to prevent users from making typos.  One tool that is great at preventing this is the jQuery AutoComplete.  However, sometimes you want to drive it off of client entered data and not via a constant array or ajax call.  Let's look at an example where we populate the AutoComplete via an existing TextArea on the page.

The jQuery splits on newline and fills the autocomplete whenever the textarea changes:
$("#Choices").change(function () {    
    var choices = $(this).val().split('\n');    
    $("#DefaultChoice").autocomplete({        
        source: choices    
    });
});
And the supporting markup:
<div id="DivList" class="dataChoice">
    <label for="Choices">Choices:</label>
    <textarea cols="20" id="Choices" name="Choices" rows="2"></textarea>
    
    <label for="DefaultChoice">Default Choice:</label>
    <input id="DefaultChoice" name="DefaultChoice" type="text" value="" />
</div>
Get the full source on GitHub.

Comments

Popular posts from this blog

Xamarin Certified Mobile Developer!

Range Validation with jQuery Validation Plugin

Sometimes you need to do client side validation based on other controls on the screen. Here is an example of how you can use the jQuery validation plugin to do dynamic range validation: < style type = " text/css " > label . error { color : red ; } < / style > < form id = " betweenForm " method = " post " action = " " > Change some values : < br / > < label for = " a " > Field min : < / label > < input id = " a " name = " a " type = " text " value = " 1 " / > < br / > < label for = " b " > Field max : < / label > < input id = " b " name = " b " type = " text " value = " 100 " / > < br / > < label for = " c " > Field between : < / label > < input id = " c " class = " required " name = ...