Blogs

This post is about the supported ComboBox search modes. With the jQWidgets ComboBox users can quickly find and select a value from a pre-populated list of values as they type. It has built-in search mode functionality. The ComboBox supports the following search modes:
– Starts with
– Starts with(Case Sensitive)
– Ends with
– Ends with(Case Sensitive)
– Contains
– Contains(Case Sensitive)
– Equal
– Equal(Case Sensitive)

The default ComboBox search mode is “Contains”, i.e when a user types into the input field, the widget tries to find a value which contains the typed string. If it finds such value, it highlights it and brings it into the view. To change the search mode, set the ComboBox searchmode property.

$("#jqxComboBox").jqxComboBox({ searchmode:  'startswith'});

Here’s the list of possible values for the searchmode property: ‘startswithignorecase’, ‘startswith’, ‘endswithignorecase’, ‘endswith’, ‘containsignorecase’, ‘contains’, ‘equalsignorecase’ and ‘equals’.

Now, we will illustrate how to add a ComboBox to a web page.

– Add the javascript and stylesheet files. We need to load the jQuery framework and the jqxcore.js. The ComboBox plugin uses a listbox, scrollbar and button plugins and we need to load jqxlistbox.js, jqxbuttons.js and jqxscrollbar.js. To add a visual style to the ComboBox, we need to load the jqx.base.css file.

    <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jqxcore.js"></script>
    <script type="text/javascript" src="jqxbuttons.js"></script>
    <script type="text/javascript" src="jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqxlistbox.js"></script>
    <script type="text/javascript" src="jqxcombobox.js"></script>

– Add a DIV element to the document’s body and set its id.

     <div id='jqxComboBox'>
     </div>

– Create the ComboBox.

       <script type="text/javascript">
            $(document).ready(function () {
                var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                 ];

                // Create a jqxComboBox
                $("#jqxComboBox").jqxComboBox({ source: source, width: '200', height: '25' });
            });
        </script>

CodeProject