jQuery Mobile autocomplete displays the list when dynamic data is added

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

Question

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)

Was it helpful?

Solution

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');
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top