ajax auto search and display dropdown

[dishadcruze]

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 } ?>

  </select> 

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

 

[Alex]

I'm not sure what ajax auto search means.

 

Can you clarify the behavior that you're trying to achieve?

[benanamen]

I believe the OP is referring to a Chained Select.

[Gandalf64]

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

selectBtn.addEventListener("change", function (event) {
    event.preventDefault();
    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) {
            //console.log(xhr.status);
        }
        if (xhr.readyState == 4 && xhr.status == 200) {
            //console.log(xhr.readyState);
            callback(xhr.responseText);
        }
    }; // End of Ready State:
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.send(formData);
}

Here's the Ajax CALL of the javascript.

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

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 September 24, 2017 by Gandalf64