jQuery Mobile autocomplete displays the list when dynamic data is added

StackOverflow https://stackoverflow.com/questions/16239660

Frage

This is the autocomplete example shown on the jQuery Mobile demo page

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <script>

    </script>
</head> 

<body> 
<div data-role="page" style="max-height:240px; min-height:240px;">
    <div data-role="content" > 
        <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search fruits..." data-inset="true">
            <li><a href="#">Apple</a></li>
            <li><a href="#">Banana</a></li>
            <li><a href="#">Cherry</a></li>
            <li><a href="#">Cranberry</a></li>
            <li><a href="#">Grape</a></li>
            <li><a href="#">Orange</a></li>
        </ul>
    </div>
</div>
</body>
</html>

This works perfectly well. If I now add a new list item then that item is displayed instead of being hidden. So I have a text input box and a listview with one item (the new one that I added).

Here is the code that I have added

$(document).ready(function(){
    $('ul').append('<li><a href="index.html">Sample</a></li>');
    $('ul').listview('refresh');
});

After doing a search and clearing the text input field that newly added item is hidden. How to make sure that the user never sees the dynamic added data. (In my case around 50 entries)

War es hilfreich?

Lösung

I just checked the HTML code that was being generated for the LI item that I was adding and I saw that the LI did not have the class ui-screen-hidden class set for it. All the other LI items had this set.

So I modified the code as shown here

$(document).ready(function(){
  $('ul').append('<li class="ui-screen-hidden"><a href="#">Sample</a></li>');
  $('ul').listview('refresh');
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top