オートコンプリート（）選択可能Li

Question

キーボードのナビゲーションにこのスクリプト機能を使用できない理由を完全に理解しようと3日間を要しています。

検索、表示、置換が正常に機能していますが、リストを参照してEnterキーを押して1つのオプションを選択しようとすると、表示されません。

フォーム

<form action="/busqueda.php" method="get" autocomplete="off"> 
    <input name="dataa" class="boxbuscar" type="text" id="despliega" onKeyUp="autocomplet()"> 
    <input src="/img/btn-buscar.png" type="image" class="lupa"> 
<ul id="lista"></ul> 

PHP

<?php 
function connect() 
{ 
return new PDO('mysql:host=localhost;dbname=dbname', 'dbuser', 'dbuserpw', array(
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION 
)); 
} 
$pdo = connect(); 
$keyword = '%' . $_POST['keyword'] . '%'; 
$sql = "SELECT * FROM tbl_productos WHERE nombre LIKE (:keyword) ORDER BY nombre ASC LIMIT 0, 15"; 
$query = $pdo->prepare($sql); 
$query->bindParam(':keyword', $keyword, DO ::PARAM_STR); 
$query->execute(); 
$list = $query->fetchAll(); 
foreach($list as $rs) 
{ 

// put in bold the written text 

$reemplazador = str_replace($_POST['keyword'], '<b>' . $_POST['keyword'] . '</b>', $rs['nombre']); 

// add new option 

echo '<li onclick="set_item(\'' . str_replace("'", "\'", $rs['nombre']) . '\')">' . $reemplazador . '</li>'; 
} 
?> 

とJS

function autocomplet() { 
var min_length = 2; // min caracters to display the autocomplete 
var keyword = $('#despliega').val(); 
if (keyword.length >= min_length) { 
    $.ajax({ 
     url: 'ajax_refresh.php', 
     type: 'POST', 
     data: { 
      keyword: keyword 
     }, 
     success: function(data) { 
      $('#lista').show(); 
      $('#lista').html(data); 
     } 
    }); 
} else { 
    $('#lista').hide(); 
} 
} 
// set_item : this function will be executed when we select an item function set_item(item) { 
// change input value 
$('#despliega').val(item); 
// hide proposition list  
$('#lista').hide(); 
} 

任意のアイデア？

更新： 短い答え：これはa link

Answer 1

キーボード・ナビゲーションが外に動作しないキーイベントを入力して、あなたの機能を結びつけるために持って自動的に動作しないですあなたが望むような箱はそれにしたい。リストのキーボードイベントを聴いて、対応するアクションをトリガする必要があります。線に沿って何かしてみてください。そして、あなたは変数を持ちたい

$(document).on('keyup', function(e) { 
    if (e.which === 38) { 
    // Arrow Up is pressed 
    } 
    if (e.which === 40) { 
    // Arrow Down is pressed 
    } 
    if (e.which === 13) { 
    // Enter is pressed 
    } 
}) 

を、のは、現在ハイライトされているリスト項目を格納するcurrentそれを呼びましょう。矢印上/下を押すとcurrentが変更されます。また、現在のリスト項目にスタイルを追加して、どの項目がユーザーに強調表示されているかを示す必要があります。 Enterを押すと、set_item(current)を呼び出して、現在のリスト項目をset_item関数に渡します。

リストが表示/非表示になっている場合は、このリスナーを追加/削除する必要があります。リストが非表示になってもドキュメントには表示されません。

ここにはJQuery keyup eventのドキュメントがあります。 tutorial on JavaScript keyboard eventsもチェックしてください。

これはすべて、ホイールを再開発して準備完了のオートコンプリートウィジェットを使用しない方がよいと言いました。ここにはJQuery UI Autocompleteがあり、ここにはAwesompleteです（バックエンドサーバーでの実装の例を見るためのページには "Ajax example"があります）。

P.S.あなたのコードに関するいくつかのアドバイスがあります：

• サーバ上でjavascriptを表示しません。サーバーからリストを受け取る最善の方法は、すべての項目をリストしたJSONオブジェクトを受け取ってからリストを作成することです。 HTMLを返さなければならない場合は、javascriptのコールバックを入れないでください。したがって、<li data-item='1'>One</li>を返してから、$('#list li').on('click', ...を使用してすべての項目のリスナーを設定してください。あなたはできるだけ別々にjavacriptとPHPを保持するこの方法で

• 名前変数、関数などのために英語を使用します。ある日、あなたのコードを誰かに見せて、スペイン語の変数名を使用すると、スペイン語以外の人があなたのコードを読むのが非常に難しくなります。

• インデントの使い方を学んでください。適切な字下げは、コードを読んで何が起こっているかを理解するのをはるかに簡単にします。ここにはjavascript style guideがあります。あなたはおそらくPHPのために同じことを見つけることができます。 this oneを試すためのオンラインツールもあります。質問に投稿する前にコードのスタイルを適切に設定することをお勧めします。コミュニティが読むのが簡単になります。

Answer 2

が入り、より良いオプションは、リストの