How can I fill a text input with JqueryMobile Listview using remote data

Question

I'm trying to merge two jquery mobile examples such that I get a listview for a text input using a remote data source.

The first example demonstrates how to use a predefined data set with a listview to fill a text input (when the required item is selected)

http://jsbin.com/upirol/11/edit

The second example (when you view source) demonstrates how to use a remote datasource with listview.

http://api.jquerymobile.com/resources/listview/example16.html

Ideally the remote data would return a label and value for this list i.e. the label is displayed on the list dropdown and the value is placed in the text box when selected.

I have put together my attempt at merging these two examples however it doesn't seem to be working as I would expect - i.e. like the first link but with remote data. The example is available at http://jsbin.com/InucEvU/1/edit?html,output . As you can see the bottom listview autofill works and fills the text input. However the top one does not - despite the relevant variables being changed. Further, I'm not quite sure how to roll in the label/value as one is able to do with jquery ui autocomplete. Any ideas on how I can accomplish these two objectives?

Jianhong · Accepted Answer · 2013-08-26 09:30:05Z

2

<!DOCTYPE html>
<html>
<head>
  <title>JQM latest</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css"> 
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
  <script src="http://jquerymobile.com/demos/1.3.0-rc.1/js/jquery.mobile-1.3.0-rc.1.js"></script> 
  <script>
    $(document).on("pageinit", function() {
      $('#mylist').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'><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");
            $ul.find('li').on( "click", function() {
              $input.val($( this ).text());
            });
          });
        }
      });
    });
  </script>
  <style>
    #edit-with-js-bin { display: none !important; }
  </style>
</head>
<body>

  <div data-role="page">

    <div data-role="content" id="content">

    <form class="ui-filterable">
      <!--<input type="text" data-type="search" id="myinput">-->

      <ul data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-input="#myinput" id="mylist">
      </ul>
    </form> 
    </div><!-- /content -->

  </div><!-- /page -->

</body>
</html>

See DEMO: http://jsbin.com/ivEZUJU/5/

edited Aug 26, 2013 at 9:30

answered Aug 26, 2013 at 9:12

Jianhong

8979 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user714852 Over a year ago

Hi @Jianhong thanks for responding :) This example does seem to have some merit however I cannot see a way to differentiate between the value/label of the incoming data. I've edited your code to fill a textbox (which needs to be done to be submitted with the form) at jsbin.com/upirol/59/watch?html,js,console,output

Jianhong Over a year ago

No problem. so long as it serves your requirements in the best manner where you can maintain. Usually label is for display purpose it doesn't identify as opposed to value. Just like your select option in html, value is to identify and whatever is outside is just for display purpose.

Collectives™ on Stack Overflow

How can I fill a text input with JqueryMobile Listview using remote data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related