HTML input dynamic filtering from PHP array variable?

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…)