checkbox list with filtering jquery -Only need to match first letter <p>i am using <code>check-box list</code> with filtering <code>jquery</code> on a page to populate all the customers name. However, when someone types "A", I only want the names that begin with A to show, not all that included the letter A. How to do this?</p> <pre><code> (function($) { $.widget("ui.checkList", { options: { listItems : [], selectedItems: [], effect: 'blink', onChange: {}, objTable: '', icount: 0 }, _create: function() { var self = this, o = self.options, el = self.element; // generate outer div var container = $('&lt;div/&gt;').addClass('checkList'); // generate toolbar var toolbar = $('&lt;div/&gt;').addClass('toolbar'); var chkAll = $('&lt;input/&gt;').attr('type','checkbox').addClass('chkAll').click(function(){ var state = $(this).attr('checked'); var setState = false; setState = (state==undefined) ? false : true; o.objTable.find('.chk:visible').attr('checked', setState); self._selChange(); }); var txtfilter = $('&lt;input/&gt;').attr('type','text').addClass('txtFilter').keyup(function(){ self._filter($(this).val()); }); toolbar.append(chkAll); toolbar.append($('&lt;div/&gt;').addClass('filterbox').text('filter').append(txtfilter)); // generate list table object o.objTable = $('&lt;table/&gt;').addClass('table'); container.append(toolbar); container.append(o.objTable); el.append(container); self.loadList(); }, _addItem: function(listItem){ var self = this, o = self.options, el = self.element; var itemId = 'itm' + (o.icount++); // generate item id var itm = $('&lt;tr/&gt;'); var chk = $('&lt;input/&gt;').attr('type','checkbox').attr('id',itemId) .addClass('chk') .attr('data-text',listItem.text) .attr('data-value',listItem.value); itm.append($('&lt;td/&gt;').append(chk)); var label = $('&lt;label/&gt;').attr('for',itemId).text(listItem.text); itm.append($('&lt;td/&gt;').append(label)); o.objTable.append(itm); // bind selection-change el.delegate('.chk','click', function(){self._selChange()}); }, loadList: function(){ var self = this, o = self.options, el = self.element; o.objTable.empty(); $.each(o.listItems, function () { console.log(); self._addItem(this); }); }, _selChange: function(){ var self = this, o = self.options, el = self.element; // empty selection o.selectedItems = []; // scan elements, find checked ones o.objTable.find('.chk').each(function(){ if($(this).attr('checked')){ o.selectedItems.push({ text: $(this).attr('data-text'), value: $(this).attr('data-value') }); $(this).parent().addClass('highlight').siblings().addClass('highlight'); }else{ $(this).parent().removeClass('highlight').siblings().removeClass('highlight'); } }); // fire onChange event o.onChange.call(); }, _filter: function(filter){ var self = this, o = self.options, el = self.element; o.objTable.find('.chk').each(function(){ if($(this).attr('data-text').toLowerCase().indexOf(filter.toLowerCase())&gt;-1) { $(this).parent().parent().show(o.effect); } else{ $(this).parent().parent().hide(o.effect); } }); }, getSelection: function(){ var self = this, o = self.options, el = self.element; return o.selectedItems; }, setData: function(dataModel){ var self = this, o = self.options, el = self.element; o.listItems = dataModel; self.loadList(); self._selChange(); } }); })(jQuery); </code></pre> <p>Here is my code.Please can anyone give any suggestion?</p>