Jquery mobile and knockoutjs search input type

Question

I see a strange problem with knockoutjs and jquery mobile, where if the input type is set to search, the binding fails for the same code, if the input type is set to text, the binding succeeds. Any ideas on how to fix this?

<form data-bind="jqmsubmit: search" > <input data-theme="b" name="search" id="search" type="search" data-bind="value: searchTerm"></input> </form> 

with the above code, searchTerm does not update when you type text in the text box and press enter. If I change the input element to type = "text", the search will be updated, as expected.

Answer 1

Entering type="search" does not serach change event, but the serach event.

So, you need to subscribe to the search event, you can use the valueUpdate parameter of the valueUpdate binding

 <form data-bind="jqmsubmit: search" > <input data-theme="b" name="search" id="search" type="search" data-bind="value: searchTerm, valueUpdate: ['search']"> </input> </form> 

Answer 2

I ran into the same problem. I think the problem is with how jQuery Mobile replaces search input elements in a slightly different way than your text elements. This workaround works for me:

 <input type="search" onkeyup="ko.contextFor(this).$data.searchTerm(this.value);" onchange="ko.contextFor(this).$data.searchTerm(this.value);" placeholder="Search" />