How to use a jQuery Mobile autoComplete plugin?

Last Updated : 16 Nov, 2020

In this article, we will learn about the AutoComplete jQuery Mobile plugin which helps mobile or web developers to add autocomplete search box in their projects.

Please download the required pre-compiled files from the below link and save it in your working folder for implementation. Please take care of proper file paths while including in your source codes.

https://github.com/commadelimited/autoComplete.js

Example 1: The following example demonstrates an autocomplete search feature using the above plugin, for a list of countries.

HTML

<!DOCTYPE html>
<html>
<head>
    
    <meta content="initial-scale=1, maximum-scale=1,
        user-scalable=0" name="viewport" />
    <meta name="viewport" content="width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
        <!--jQuery Mobile library for stylesheet -->
    <link rel="stylesheet" 
         href="http://code.jquery.com/mobile/1.2.0/
         jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="styles.css" />

    <script 
          src="http://code.jquery.com/jquery-1.8.2.min.js">
        </script>
        <!--jQuery Mobile library-->
    <script 
          src="http://code.jquery.com/mobile/1.2.0/
          jquery.mobile-1.2.0.min.js">
        </script>
         <!--jQuery Mobile Autocomplete plugin-->
    <script src="jqm.autoComplete-1.5.2.js">
         </script>
    <script src="code.js"></script>
</head>

<body>
    <div data-role="page" id="mainPage">

        <div data-role="header">
          <h1>jQuery Mobile Autocomplete</h1>            
        </div>

        <div data-role="content">
            <h3>Local Simple Data</h3>
            
<p>
            In this example autoComplete uses a local array of strings.</p>

                       
<p>
            The list contains strings with'Afganistan', 'Albania', 'Angola',
                'Argentina',
                     'Madagascar', 'Malaysia',
               'Bahrain', 'Bangladesh', 'Belarus',    'Belgium',    
               'Maldives', 'Mali', 'Mauritius', 'Mexico',
                 'Namibia', 'Nepal', 'Niger', 'Norway', 'Burundi', 'Oman',
               'Canada', 'Cameroon', 'Burma', 'Pakistan', 'Panama', 'China', 
               'Peru', 'Croatia']                
            </p>

            
<p>
            <input type="text" id="searchField" placeholder="Countries">
            <ul id="suggestions" data-role="listview" data-inset="true">
            </ul>
            </p>

        </div>
    </div>

    <script>

        $("#mainPage").bind("pageshow", function(e) {

            var dataList = ['Afganistan', 'Albania', 'Angola', 
                           'Argentina',
                     'Madagascar', 'Malaysia',
                            'Bahrain', 'Bangladesh', 'Belarus',    'Belgium',    
               'Maldives', 'Mali', 'Mauritius', 'Mexico',
                 'Namibia', 'Nepal', 'Niger', 'Norway', 'Burundi',
                           'Oman',
               'Canada', 'Cameroon', 'Burma', 'Pakistan', 'Panama',
                           'China', 
               'Peru', 'Croatia'];

            $("#searchField").autocomplete({
                target: $('#suggestions'),
                source: dataList,
                link: 'resultArray.html?term=',
                minLength: 1,
                matchFromStart: false
            });
        });
    </script>

</body>
</html>

"resultArray.html" file: The following demonstrates the code for the "resultArray.html" file used in the above code which is the link file used in the javascript part for the above HTML code.

html

<!DOCTYPE html>
<html>
<body>
   <h2>Result page </h2>
    <div data-role="page" id="mainPage">        
        <div data-role="content">
            
<p>
            I'm the result page for Country 
                       autocomplete search.
            </p>

        </div>
    </div>
</body>
</html>

Output:

Before Search:

After Search:

Example 2: The following example demonstrates an autocomplete search for objects in the form of "value" and "label" for a list consisting of country names.

html

<!DOCTYPE html>
<html>
<head>    
    <meta content="initial-scale=1, maximum-scale=1,
    user-scalable=0" name="viewport" />
    <meta name="viewport" content="width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <link rel="stylesheet" 
     href="http://code.jquery.com/mobile/1.2.0/
         jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="styles.css" />

    <script src="http://code.jquery.com/jquery-1.8.2.min.js">
        </script>
    <script src="http://code.jquery.com/mobile/1.2.0/
        jquery.mobile-1.2.0.min.js">
     </script>
    <script src="jqm.autoComplete-1.5.2-min.js">
        </script>
    <script src="code.js"></script>
</head>

<body>
    <div data-role="page" id="mainPage">

        <div data-role="header">
          <h1>jQuery Mobile Autocomplete</h1>            
        </div>

        <div data-role="content">
           <h3>Callback Function</h3>
        
<p>
          The autoComplete uses a local array of objects. 
          The function selects the new "data-autocomplete" 
          property on each anchor tag in the selected list.
        </p>

        
<p>
        <input type="text" id="searchFieldID" 
                 placeholder="Countries">
        <ul id="suggestions" data-role="listview" 
                 data-inset="true"></ul>
        </p>

        </div>
    </div>

    <script>
        $("#mainPage").bind("pageshow", function(e) {

            var autocompleteData = $.parseJSON(
'[{"value":"AL","label":"Alabama"},{"value":"AK","label":"Alaska"},
{"value":"AS","label":"American Samoa"},{"value":"AZ","label":"Arizona"},
{"value":"AR","label":"Arkansas"},{"value":"CA","label":"California"},
{"value":"CO","label":"Colorado"},{"value":"CT","label":"Connecticut"},
{"value":"DE","label":"Delaware"},{"value":"DC","label":"District of Columbia"},
{"value":"FL","label":"Florida"},{"value":"GA","label":"Georgia"},
{"value":"GU","label":"Guam"},{"value":"HI","label":"Hawaii"},
{"value":"ID","label":"Idaho"},{"value":"IL","label":"Illinois"},
{"value":"IN","label":"Indiana"},{"value":"IA","label":"Iowa"},
{"value":"KS","label":"Kansas"},{"value":"KY","label":"Kentucky"},
{"value":"LA","label":"Louisiana"},{"value":"ME","label":"Maine"},
{"value":"MD","label":"Maryland"},{"value":"MA","label":"Massachusetts"},
{"value":"MI","label":"Michigan"},{"value":"MN","label":"Minnesota"},
{"value":"MS","label":"Mississippi"},{"value":"MO","label":"Missouri"},
{"value":"MT","label":"Montana"},{"value":"NE","label":"Nebraska"},
{"value":"NV","label":"Nevada"},{"value":"NH","label":"New Hampshire"},
{"value":"NJ","label":"New Jersey"},{"value":"NM","label":"New Mexico"},
{"value":"NY","label":"New York"},{"value":"NC","label":"North Carolina"},
{"value":"ND","label":"North Dakota"},
{"value":"NI","label":"Northern Marianas Islands"},
{"value":"OH","label":"Ohio"},{"value":"OK","label":"Oklahoma"},
{"value":"OR","label":"Oregon"},{"value":"PA","label":"Pennsylvania"},
{"value":"PR","label":"Puerto Rico"},{"value":"RI","label":"Rhode Island"},
{"value":"SC","label":"South Carolina"},{"value":"SD","label":"South Dakota"},
{"value":"TN","label":"Tennessee"},{"value":"TX","label":"Texas"},
{"value":"UT","label":"Utah"},{"value":"VT","label":"Vermont"},
{"value":"VI","label":"Virgin Islands"},{"value":"VA","label":"Virginia"},
{"value":"WA","label":"Washington"},{"value":"WV","label":"West Virginia"},
{"value":"WI","label":"Wisconsin"},{"value":"WY","label":"Wyoming"}]');

            $("#searchFieldID").autocomplete({
                target: $('#suggestions'),
                source: autocompleteData,
                callback: function(e) {
                    var $a = $(e.currentTarget);
                    $('#searchFieldID').
                                        val( $a.data('autocomplete').value );
                    $("#searchFieldID").autocomplete('clear');
                },
                link: 'resultArray.html?term=',
                minLength: 1
            });
        });
    </script>

</body>
</html>

Note: The code for the "resultArray.html" file used in the JavaScript part is the same as the one used in the first example.