Creating Wijmo List with TextBox Filter

The HTML5 based Wijmo offers a wide variety of widgets which are very helpful when designing a website. They are not just restricted to a specific feature but covers different types of requirements which a developer might have. The WijList widget is a great tool for scenarios like when you want to present to your users a list of certain items and allow them to select one or more items from it. This is the normal functionality which is already built into the widget. But what if we want to filter out things in the list so that the selection becomes easier for a user. Well, thanks to jQuery and the flexible architecture of Wijmo that this can be done easily. In this blog article, I am focusing on this implementation. So first of all let us check what exactly are we creating. As you may have noticed, there is a textbox at the top of the WijList. This is actually an input text control which is used to show the selected values from the list. In this case, we are using it for entering text as well, which in turn will filter the list items and display items according to the text entered. A majority of the code used to create this sample is same as you will find in the online sample. Let us take a quick look on how exactly are we implementing it. IMPLEMENTATION:- We are basically going to iterate through all the li elements within the WijList and show/hide them based on the text entered in the input box using the keyup event. This is the small piece of code which will do the trick:

$('#testinput').keyup(function () {  
   var valThis = $(this).val().toLowerCase();  
   $('.wijmo-wijlist-ul>li').each(function () {  
      var text = $(this).text().toLowerCase();  
      (text.indexOf(valThis) == 0) ? $(this).show() : $(this).hide();  
   });  
})

So its done. Very simple, but provides a very useful functionality too. A sample application showing its actual implementation can be downloaded from the link below. Download Sample