I have an input field with a dynamically populated datalist. Suppose my target record has a name “Tomatoes Fresh”. As they type in letters I use JQuery/PHP/MySQL to dynamically populate the list. If they type in “fr tom” I explode the input and search with LIKE for “fr” and “tom” to return a list of records that match those criteria. It returns the records from MySQL perfectly.
When I populate the datalist it works perfectly in Chrome on MacOS. It will show a list of all matches even though the actual text in the input field does not match the values in the datalist, But not in Safari on MacOS or in Chrome or Safari on IOS. It appears on those devices/browsers it requires the input to match the displayed value, but in Chrome on MacOS it does not. Is there a way around that? Thanks
Your SQL query is independent of the browser since it runs on the server. Do you have some JS that is affecting how the query runs or how it displays on the browser?
Sorry, that is not the issue. The query is running just fine. What I’m referring to is the datalist behavior on the browser. Some appear to allow values in the input field that are not in the datalist (Chrome on MacOS) while others require the value in the input field to be in the shown datalist (Safari and Chrome on IOS). Is there a way around that datalist behavior or is that just the way it is. Different browsers handle the datalist element differently and that’s all there is to it.
So if the query is based on input of “tom fr” and the value that is returned by the query is “Tomatoes Fresh”, in Chrome on MacOS it will display “Tomatoes Fresh” in the datalist, but in the others it shows nothing because the value in the datalist does not match the value in the input field.