Filtering an unordered list with jQuery Mobile 1.5

Question

I am in the process of upgrading an app's jQuery and jQuery Mobile to the latest versions, I had to move to jQuery Mobile 1.5 to do so and the search box for my app has disappeared because of this.

Following the 1.5 upgrade guide it says to change data-role to data-ui-role but when I do this all styling on the app breaks.

Here is the bit of code not displaying properly...

<div id="wifi">
      <ul id="selectWifi" data-role="listview" data-filter="true" data-filter-placeholder="Search AP.." data-inset="true">
      </ul>
</div>

The data-filter property would create a searchbox at the top of the list view, making it so you could filter all items in the unordered list, now the searchbox does not appear at all.

Here is where the unordered list is built...

newhtml=$('<li class="liSSID" id="' + id + '"   ssid="' + ssid + '"><a class="aSSID" href="#">' + ssid +  
                '<span style="float:right">' + 
                band + 
                '<img id="' + id + "_check_img" + '" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" height="32" width="32"/>' +
                rssiToBar(quality, signal) + '</span></a></li>')

    newhtml.data("wifi_data",data)
    $("#selectWifi").append(newhtml)

Things I have tried:

1. Changing data-role to data-ui-role
2. Switching from 1.5 rc1 to 1.5 alpha1

Imports:

jquery.mobile-1.5.0-rc1.min.css
jquery-3.6.1.min.js
jquery.mobile-1.5.0-rc1.min.js

Answer 1

I strongly believe You need to add the search input by yourself, the built-in search input injection has been removed. This would work:

<form class="ui-filterable">
  <input id="selectWifi-input" placeholder="Search AP.." data-type="search">
</form>
<ul id="selectWifi" data-role="listview" data-filter="true" data-input="#selectWifi-input"></ul>