2
私は以下のコードをウェブページのオートコンプリート機能に使用しています。問題は、私がマウスポインタを使って提案をナビゲートすることができないことです。しかし、リスト項目を更新した後でアップ/ダウンキーを1回押すと、マウスポインタのナビゲーションが正常に機能しています。AJAXライブ検索の矢印キーとマウスのナビゲーション
- html selectオプションのナビゲーションのように、マウスポインタとキーボードナビゲーションが機能するようにコードを変更することをお勧めしますか？
- アップ/ダウンキーを使用して提案リストのスクロールを改善するにはどうすればよいですか？
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 : this function will be executed every time we change the text
function livesearch() {
var min_length = 1; // min caracters to display the 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 : this function will be executed when we select an item
function set_item(item) {
// change input value
$('#college').val(item);
// after selecting an item, update list item and hide proposition list
var min_length = 1; // min caracters to display the 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 is pressed for livesearch text box
$('#college').bind('keypress keydown keyup', function(e){
if(e.keyCode == 13) { e.preventDefault(); }
});
// Livesearch list or navigate and select a 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 is 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 is 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) // Up 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 is not blank change the text in search box else hide list and 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 * FROM colleges WHERE college_name LIKE (:keyword) ORDER BY college_name ASC";
$query = $pdo->prepare($sql);
$query->bindParam(':keyword', $keyword, PDO::PARAM_STR);
$query->execute();
$list = $query->fetchAll();
foreach ($list as $rs) {
// put in bold the 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>';
}
?>
ありがとうございます。