Click here to Skip to main content
15,845,681 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I am developing an application using ASP.NET MVC .In,this i am using jquery mobile 1.0 version for the autocomplete .Can you please provide some examples like how to assign a data in the javascript file for the autocomplete.
I want the dropdown list to be visible on focus of it.
It will be gud if i got the example.

Thanking you in advance
Updated 2-Sep-15 21:29pm

1 solution

jQuery Mobile Autocomplete

With Local Data:-


<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Chrysler</a></li>
    <li><a href="#">Dodge</a></li>
    <li><a href="#">Ferrari</a></li>
    <li><a href="#">Ford</a></li>
    <li><a href="#">GMC</a></li>
    <li><a href="#">Honda</a></li>
    <li><a href="#">Hyundai</a></li>
    <li><a href="#">Infiniti</a></li>
    <li><a href="#">Jeep</a></li>
    <li><a href="#">Kia</a></li>
    <li><a href="#">Lexus</a></li>
    <li><a href="#">Mini</a></li>
    <li><a href="#">Nissan</a></li>
    <li><a href="#">Porsche</a></li>
    <li><a href="#">Subaru</a></li>
    <li><a href="#">Toyota</a></li>
    <li><a href="#">Volkswagen</a></li>
    <li><a href="#">Volvo</a></li>

Demo Here:[^]

With Remote Data:-


<h3>Cities worldwide</h3>
<p>After you enter at least three characters the autocomplete function will show all possible matches.</p>
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="d"></ul>


.ui-listview-filter-inset {
    margin-top: 0;


$( document ).on( "pageinit", "#myPage", function() {
    $( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
        var $ul = $( this ),
            $input = $( data.input ),
            value = $input.val(),
            html = "";
        $ul.html( "" );
        if ( value && value.length > 2 ) {
            $ul.html( "<li><div class="ui-loader"></div></li>" );
            $ul.listview( "refresh" );
                url: "",
                dataType: "jsonp",
                crossDomain: true,
                data: {
                    q: $input.val()
            .then( function ( response ) {
                $.each( response, function ( i, val ) {
                    html += "<li>" + val + "</li>";
                $ul.html( html );
                $ul.listview( "refresh" );
                $ul.trigger( "updatelayout");

Demo Here:[^]
Share this answer
ravithejag 9-Sep-15 7:33am    
I already have a model with data present in the view no need to make ajax call.
And i want all the data to be displayed on focus of the textbox and to be filtered based on the entered text.

I am using jQuery mobile 1.0 and on page load only all the data getting displayed.
Palash Mondal_ 9-Sep-15 10:30am    
Then you can just loop through and use the logic above on textbox focus instead.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900