Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Startseite</title>
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
- <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
- <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
- <script>
- $( document ).on( "pageinit", "#startseite", function() {
- $( "#autocomplete" ).on( "filterablebeforefilter", 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'><span class='ui-icon ui-icon-loading'></span></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");
- });
- }
- });
- });
- </script>
- <script>
- $(document).ready(function() {
- $("li").click(function() {
- $("#autocomplete").val($(this).text());
- });
- });
- </script>
- </head>
- <body>
- <div data-role="page" id="startseite">
- <div data-role="header" data-theme="a" id="header">
- <h1>Titel</h1>
- </div>
- <!--<div data-role="main" class="ui-content">!-->
- <div data-role="tabs" id="tabs" >
- <div data-role="navbar" data-iconpos="left">
- <ul>
- <li><a href="#one" data-ajax="false" class="ui-btn-active" data-icon="search">tab1</a></li>
- <li><a href="#two" data-ajax="false" data-icon="location">Karte</a></li>
- </ul>
- </div>
- <div id="one" class="ui-body-d ui-content">
- <ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Stadtname" data-filter-theme="a"></ul>
- </div>
- <div id="two" class="ui-body-d ui-content">
- Page2
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement