php - Close UL List with Jquery on Tab (Using Arrays) -
hi building autocomplete using arrays. want close ul list when tab pressed. can using jquery id's when use arrays fill jquery id's list not close if function put in id consecutively next (if there no function on second list closes fine). please see code below. if use ids instead of arrays, , build separate function each id works fine. want use array shorten code.
html
<input type="text" id="user_fathers_company" onkeyup="autocomplete_1()"/> <ul id="user_fathers_company_list"></ul> <input type="text" id="user_fathers_designation" onkeyup="autocomplete_1()" /> <ul id="user_fathers_designation_list"></ul> jquery/ajax
var selectedvalue = []; $(document).ready(function() { $("#user_fathers_company").keydown(function() { selectedvalue = ["#user_fathers_company", "#user_fathers_company_list", "fatherscompany"]; }); $("#user_fathers_designation").keydown(function() { selectedvalue = ["#user_fathers_designation", "#user_fathers_designation_list", "fathersdesignation"]; }); }); // close ul on clicking outside or tab on keyboard ----------------------------------------------------------------- $(window).click(function() { $(selectedvalue[1]).hide(); }); $(document).on('keydown', function(e) { var keycode = e.keycode || e.which; if (keycode == 9) { $(selectedvalue[1]).hide(); } }); $(selectedvalue[1]).click(function(event) { event.stoppropagation(); }); // autocomplete ----------------------------------------------------------------- function autocomplete_1() { var min_length = 3; // min caracters display autocomplete var keyword = $(selectedvalue[0]).val(); var arrayselector = selectedvalue[2]; if (keyword.length >= min_length) { $.ajax( { url: 'classes/autocomplete.php', type: 'post', data: { keyword: keyword, arrayselector: arrayselector }, success: function(msg) { $(selectedvalue[1]).show(); $(selectedvalue[1]).html(msg); } }); } else { $(selectedvalue[1]).hide(); } } // set_item : function executed when select item function set_item(item) { // change input value $(selectedvalue[0]).val(item); // hide proposition list $(selectedvalue[1]).hide(); } php (for ajax autocomplete)
// autocomplete $arrayselector = $_post['arrayselector']; if ($arrayselector == "fatherscompany") { $searchvalue = array("companyname_name", "tbl_companyname"); } if ($arrayselector == "fathersdesignation") { $searchvalue = array("designation_name", "tbl_designation"); } if (!empty($_post['keyword'])){ $keyword = '%'.$_post['keyword'].'%'; $select = $con->prepare("select distinct $searchvalue[0] $searchvalue[1] $searchvalue[0] (:keyword) order $searchvalue[0] asc limit 0, 5"); $select->setfetchmode(pdo::fetch_assoc); $select->bindparam(':keyword', $keyword, pdo::param_str); $select->execute(); $data = $select->fetchall(); foreach ($data $row) { // select column name based if ($arrayselector == "fatherscompany") { $row = $row['companyname_name']; } if ($arrayselector == "fathersdesignation") { $row = $row['designation_name']; } // put in bold written text $listvalue = str_ireplace($_post['keyword'], '<b>'.$_post['keyword'].'</b>', $row); // add new option echo '<li onclick="set_item(\''.str_replace("'", "\'", $row).'\')">'.$listvalue.'</li>'; } }
Comments
Post a Comment