javascript - 自动完成数据库中的多个值

Question

我之前已经完成了这个问题。但是我遇到了另一个问题。我想进行多个自动完成，例如 https://jqueryui.com/autocomplete/#multiple 。我已将函数包含到我的脚本中，但仍然不起作用。

这是 html 电子邮件表单代码

   <div class="input_container">
    <input type="text" id="contact_id" name="sender" onkeyup="autocomplet()" size="95">
    <input type="hidden" id="client_id" value="<?php echo $id_client; ?>">
<ul id="contact_list"></ul>

这个 JavaScript 脚本

function autocomplet() {
var min_length = 1; // min caracters to display the autocomplete
var keyword = $('#contact_id').val();
var cid = $('#client_id').val();
if (keyword.length >= min_length) {
    $.ajax({
        url: 'ajax_email_refresh.php',
        type: 'POST',
        data: "keyword="+keyword+"&cid="+cid+"",
        success:function(data){
            $('#contact_list').show();
            $('#contact_list').html(data);
                 focus: function() {
                  // prevent value inserted on focus
                  return false;
                },
                select: function( event, ui ) {
                  var terms = split( this.value );
                  // remove the current input
                  terms.pop();
                  // add the selected item
                  terms.push( ui.item.value );
                  // add placeholder to get the comma-and-space at the end
                  terms.push( "" );
                  this.value = terms.join( ", " );
                  return false;
                  }
        }
    });
    } else {
    $('#contact_list').hide();
 }
}

// set_item : this function will be executed when we select an item
function set_item(item) {
// change input value
$('#contact_id').val(item);
// hide proposition list
$('#contact_list').hide();
}

ajax_email_refresh代码

    $keyword = '%'.$_POST['keyword'].'%';
    $cid = $_POST['keyword2'];
    $sql = "SELECT * FROM contact WHERE contact_name LIKE (:keyword) AND id_client = (:cid) ORDER BY contact_id ASC LIMIT 0, 10";
    $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
     $contact_name = str_replace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $rs['contact_email']);
     // add new option
     echo '<li onclick="set_item(\''.str_replace("'", "\'", $rs['contact_email']).'\')">'.$contact_name.'</li>';
   }

Answer 1

我不确定我是否正确理解了您要查找的内容。我提供了一个可以帮助您入门的示例。我包含的计时器是为了最大限度地减少您将执行的 ajax 请求量。它不是在每次击键后发出请求，而是在最后一次击键后等待 250 毫秒来运行 ajax。

var object = [{'key': 'value1'}, {'key': 'value2'}];
var timer;
function autocompletion(element){
	clearTimeout(timer);
	timer = setTimeout(function(){
		var options = element.nextElementSibling;
        options.innerHTML = '';
      
		for(var i = 0; i < object.length; ++i){
			var li = document.createElement('li');
			li.innerHTML = object[i]['key'];
			options.appendChild(li);
		}
		options.style.display = 'block';
	}, 250);
}

<div class="input_container">
<input type="hidden" id="id_client" name="id_client" value="<?php echo $id_client; ?>">
<input type="text" id="contact_id" name="sender" onkeyup="autocompletion(this)" size="95">
<ul id="contact_list" style='display: none'></ul>