How to Develop an Access Like Combo Box on a Webpage (1 Viewer)

Steve R.

Retired
Joined
Jul 5, 2006
Messages
1,798
A while back, I migrated my MS Access database to MySQL and I access the database using Firefox/PHP/HTML/CSS. Note the absence of JavaScript.

One of my tables is a list of authors. I can display (on Firefox) all the authors with a listbox, but it is a pain to scroll down to the correct author. To get around that, I would like to develop an Access like combo-box that matches all the names as one types them in.

The problem seems to be that PHP does not apparently have a "keydown" event which would re-query the author name table for all matching author names.

The solution would seem to be to use JavaScript (onkeydown) to read the author name array. (The author name array is imported using PHP). Would that the correct approach to pursue?

A potential alternative approach. Can Python (pygame.KEYDOWN) be embedded instead of JavaScript on a web-page? I have not yet experimented with embedding Python code in a web-page.

Note: I am not asking for a solution, just the appropriate approach to pursue as I will need to learn JavaScript and/or Python.
 
Last edited:

Steve R.

Retired
Joined
Jul 5, 2006
Messages
1,798
Thanks for your quick reply. As usual, I have not adequately described the issue. I am already using an HTML drop down list. The issue is that it displays a list of ALL names. You have to scroll down to the correct name.

There is a partial short-cut in that you can enter the first letter of a name and the drop-down list will go to the first entry of the name that begins with that letter. To my knowledge, with HTML, you can't add a second letter to further specify a name. But then I could be totally wrong too, as there may be a way to do it.

For example if I first type "A", the HTML drop-down list will go to "Alfred", as an example.

Should I then type "l", the next letter in "Alfred", the HTML drop-down list jumps to "Lester", instead of staying with "Alfred".

My knowledge of HTML/PHP/CSS is very rudimentary. I have not run across an example where HTML has a "keydown" like event so that you can build a character string and get results that match that character string.

For example, typing "Al" should retrieve all authors that have "Al" somewhere in their name: Alfred, Alice, etc.

It appears that JavaScript and Python have "keydown" like events that would allow the building a string like "Al" that would then show the names of authors that have "Al" somewhere in their name that can be displayed in a drop-down list.

Since my knowledge is very rudimentary, I was wondering what I need to study to get that an MS Access like "combobox" working.
 

plog

Banishment Pending
Joined
May 11, 2011
Messages
9,573
Javascript.

There's 2 computers involved in you viewing a web page: Client and Server. The Client is the computer you are on now which has a web browser which requests HTML from the Server. The Server of this web page gets the Clients request and returns the appropriate HTML. The client loads it into its browser and allows you to see/interact with this page.

That means there are 2 ways to do web programming--on the client (your browser via Javascript) or on the Server (via PHP, ASP, Python, C, even Javascript, or Perl and so on and so on depending on the Server). If you want to respond to any user action without reloading the page (asking for a new one from the server) you have to use Javascript.
 

Steve R.

Retired
Joined
Jul 5, 2006
Messages
1,798
Javascript.
...
If you want to respond to any user action without reloading the page (asking for a new one from the server) you have to use Javascript.
Thanks, I suspected as much. Our local library (amazingly enough) actually has the 2015 edition of "Sam's Teach Yourself HTML,CSS, and JavaScript". Time to start reading.
 

youyiyang

Registered User
Joined
Apr 7, 2009
Messages
49
Use Ajax, Asynchronous Javascript And XML, this can be done by ajax/javascript+PHP server side
 

Steve R.

Retired
Joined
Jul 5, 2006
Messages
1,798
Use Ajax, Asynchronous Javascript And XML, this can be done by ajax/javascript+PHP server side
Thanks very much for responding.

Since posting (what is now an old question), I found the solution here: Show datalist labels but submit the actual value. I was able to successfully adapt the code to my situation. Since adapting the code, I have not done much further development on my database.

As I have learned more (and as the sample code demonstrates) I will need to focus on learning DOM. I look forward, when I get active again, to ask questions here. So thanks again.
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top Bottom