Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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 
        </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" 
         jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="styles.css" />
  
        </script>
        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.

Output: 
 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!