Jump to content
Sign in to follow this  
dishadcruze

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 } ?>
</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()

 


Share this post


Link to post
Share on other sites

I'm not sure what ajax auto search means.

 

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

Share this post


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) {
    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 by Gandalf64

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

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.