Jump to content

ajax auto search and display dropdown

Recommended Posts

I want to convert my dropdown to ajax auto search.

Here is my dropdown, when i select any company name it displays other 2 dropdowns by taking the id.

<select name="company" class="form-control" onChange="showSubcat(this);" required>
<option value="">Select Company</option>
<?php $s1 = mysqli_query($con, "select * from company") or die (mysqli_error($con));
while($s2 = mysqli_fetch_array($s1)) { ?>
<option value="<?php echo $s2['id']; ?>"><?php echo $s2['company']; ?></option>
<?php } ?>

In showSubcat(), i display 2 dropdowns from database.

As i have huge company names stored in database, its difficult to select from dropdown , so i want to convert this into ajax auto search. I tried to do like this

<input type="text" name="company" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Company Name">

Here i am facing 2 issues

  1. This is taking company name , but i want to take company id so that i can display other 2 dropdowns
  2. Not getting how to display 2 drop down based on this value, not getting how to call onChange()


Link to post
Share on other sites

I personally would use an addEventListener instead of inline javascript like this example:

selectBtn.addEventListener("change", function (event) {
    selectCompany(); // Ajax or what have you function. 
}, false); // End of addEventListener Function: 

the Ajax would be something that you will have to figure out. However, doing it this way it would be easier to daisy chain or do whatever you are trying to do. 


For example I generate blog postings based on the person selected and the following is the ajax portion based on what the visitor of the website chooses.


Me bad, The following is the callback portion of the Ajax.

function displayBlog(url, formData, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 2) {
        if (xhr.readyState == 4 && xhr.status == 200) {
    }; // End of Ready State:
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

Here's the Ajax CALL of the javascript.

 * Display Blog that user selects
function selectUser() {
    var url = 'select_user.php';
    var form_data = serializeFormById('selectBlog');
    displayBlog(url, form_data, function (result) {
        var json = JSON.parse(result);

This is the function that the addEventListener function is calling. 

I use a callback function though I could had easily just created another selection element or called another selection element. (maybe even using a callback function?) 

Edited by Gandalf64
Link to post
Share on other sites
This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.