来自PHP数组变量的HTML输入动态过滤？

Question

I have a score entry page on a PHP-based website. It uses a DB query to retrieve the player's Name & DB ID into a PHP array variable, then loops around the returned data to create an HTML <select> dropdown list.

This has now become too long… especially when entering on a mobile device (on iOS its even worse with that scroll wheel implementation they use - I dont even know what it looks like on Android!)

So I have a PHP array with the Name & ID fields in it.

I would like to convert this to filter a dynamic dropdown list as characters are typed in by the user.

I am novice at Javascript and it's nuances, though understand the principles of the language. The DOM model and other things I am also not very familiar with. I expect to use an onChange() function on the <input> textbox(?).

But how do I either tie that back to my existing PHP array variable? Or copy this variable “across” to the JS function?

I have changed the underlying DB to a NoSQL version (MongoDB). The bulk of tutorials, blogs, etc, for “AJAX Live Search” or equivalent seem to be centred around MySQL (which I previously used…)

Answer 1

The esiest approach would be usage of some js library, which can do what you need.

In my experience this should work for you: https://selectize.dev/

It combines select with text input, where text input is only used to seach in the select and hides unmatching records from it.