Jump to content

ajax auto search and display dropdown


dishadcruze

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

 


Link to comment
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?) 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.