php - Arrow key and mouse navigation for AJAX Live search -
i using below code autocomplete feature in webpage. problem not able navigate through suggestion using mouse pointer. if up/down key pressed once after list item refreshed mouse pointer navigation working fine.
- could please suggest code change make mouse pointer , keyboard navigation work navigation in html select option?
- how can improve scrolling of suggestion list using up/down key?
html:
<div class="field-wrap"> <input type="text" id="college" placeholder="college name" required autocomplete="off"/> <ul id="college_list"></ul> </div> css:
.field-wrap ul { width: 93%; margin-top: 1px; border: 1px solid #3498db; position: absolute; z-index: 9; background: #0f0f0f; list-style: none; max-height: 100px; overflow-y:auto; } .field-wrap ul li { padding: 2px; border: solid grey; border-width: 0 0 2px 0; } #college_list { display: none; } .selected { background: #2980b9; } javascript:
// livesearch : function executed every time change text function livesearch() { var min_length = 1; // min caracters display autocomplete var keyword = $.trim($('#college').val()); if (keyword.length >= min_length) { $.ajax({ url: 'livesearch.php', type: 'post', data: {keyword:keyword}, success:function(data){ $('#college_list').show(); $('#college_list').html(data); } }); } else { $('#college_list').hide(); } } // set_item : function executed when select item function set_item(item) { // change input value $('#college').val(item); // after selecting item, update list item , hide proposition list var min_length = 1; // min caracters display autocomplete var keyword = $('#college').val(); if (keyword.length >= min_length) { $.ajax({ url: 'livesearch.php', type: 'post', data: {keyword:keyword}, success:function(data){ $('#college_list').hide(); $('#college_list').html(data); } }); } } // display or hide list based on focus in search box $('#college').focus(function() { livesearch(); $(document).bind('focusin.college click.college',function(e) { if ($(e.target).closest('#college, #college').length) return; $(document).unbind('#college'); $('#college_list').fadeout('medium'); }); }); // disable default behaviour of form submit when enter pressed livesearch text box $('#college').bind('keypress keydown keyup', function(e){ if(e.keycode == 13 ) { e.preventdefault(); } }); // livesearch list or navigate , select list item based on keyup events $('#college').keyup(function(e) { var $listitems = $('.field-wrap li'); var key = e.keycode, $selected = $listitems.filter('.selected'), $current; // search text pattern in database if key pressed not up/down/enter if ( key != 40 && key != 38 && key != 13 ) livesearch(); $listitems.removeclass('selected'); // navigate or select list item based on up/down/enter key pressed if list visible if($('#college_list').is(':visible')) { var menu = $('#college_list'); var height = $selected.outerheight(); //height of <li> var top = menu.scrolltop(); //current top of scroll window var menuheight = menu[0].scrollheight; //full height of <ul> if ( key == 40 ) // down key { if ( ! $selected.length || $selected.is(':last-child') ) { $current = $listitems.eq(0); menu.scrolltop(0); } else { $current = $selected.next(); menu.scrolltop(top + height); } $current.addclass('selected'); } if ( key == 38 ) // key { if ( ! $selected.length || $selected.is(':first-child') ) { $current = $listitems.last(); menu.scrolltop(menuheight + height); } else { $current = $selected.prev(); menu.scrolltop(top - height); } $current.addclass('selected'); } if ( key == 13 ) // enter key { $current = $selected; // if selected text in list not blank change text in search box else hide list , retain entered text in search box if($current.addclass('selected').text()!='') { set_item( $current.addclass('selected').text() ); } else { $('#college_list').fadeout('medium'); } } } $('#college_list li').mousemove(function() { $('.field-wrap li').removeclass('selected'); $(this).addclass('selected'); }); }); livesearch.php:
<?php // pdo connect ********* function connect() { return new pdo('mysql:host=localhost;dbname=expertreaders', 'root', '', array(pdo::attr_errmode => pdo::errmode_exception, pdo::mysql_attr_init_command => "set names utf8")); } $pdo = connect(); $keyword = '%'.$_post['keyword'].'%'; $sql = "select * colleges college_name (:keyword) order college_name asc"; $query = $pdo->prepare($sql); $query->bindparam(':keyword', $keyword, pdo::param_str); $query->execute(); $list = $query->fetchall(); foreach ($list $rs) { // put in bold written text $college_name = preg_replace('/' . preg_quote($_post['keyword'], "/") . '/i', "<b><font color=green>\$0</font></b>", $rs['college_name']); // add new option echo '<li onclick="set_item(\''.str_replace("'", "\'", $rs['college_name']).'\')">'.$college_name.'</li>'; } ?> thanks in advance.
the mouse navigation working after key press because defined mousemove event handler inside keyup event. , dynamically created html contents use $(document).bind or $(document).on functions event handler. there duplicate event handlers in code. necessory? eg:
$('#college').bind('keypress keydown keyup', function(e){ if(e.keycode == 13 ) { e.preventdefault(); } }); // livesearch list or navigate , select list item based on keyup events $('#college').keyup(function(e) { var $listitems = $('.field-wrap li'); var key = e.keycode, $selected = $listitems.filter('.selected'), $current; use single handler , apply conditions.
if(e.keycode == 13 ) { //do stuff } else { //do else } try answer. pardon me if wrong
Comments
Post a Comment