Click here to Skip to main content
14,971,742 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
Posted
Updated 2-Sep-15 20:29pm
v2

1 solution

jQuery Mobile Autocomplete

With Local Data:-

HTML

HTML
<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>
</ul>


Demo Here: http://jsfiddle.net/o22swr9g/[^]

With Remote Data:-

HTML

HTML
<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>


CSS

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


JS

JavaScript
$( 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" );
            $.ajax({
                url: "http://gd.geobytes.com/AutoCompleteCity",
                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: http://jsfiddle.net/o22swr9g/1/[^]
   
Comments
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.

Note:
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