dishadcruze Posted September 19, 2017 Share Posted September 19, 2017 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 This is taking company name , but i want to take company id so that i can display other 2 dropdowns 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 More sharing options...
Alex Posted September 19, 2017 Share Posted September 19, 2017 I'm not sure what ajax auto search means. Can you clarify the behavior that you're trying to achieve? Link to comment Share on other sites More sharing options...
benanamen Posted September 20, 2017 Share Posted September 20, 2017 I believe the OP is referring to a Chained Select. Link to comment Share on other sites More sharing options...
Gandalf64 Posted September 24, 2017 Share Posted September 24, 2017 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.