从数据库中自动完成多个值答案

【问题标题】：Autocomplete multiple value from database从数据库中自动完成多个值
【发布时间】：2015-11-26 10:00:01
【问题描述】：

我之前已经完成了这个问题。但是我遇到了另一个问题。我想做多个自动完成，比如 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>';
   }

【问题讨论】：

到底是什么问题？
自动完成不显示。如果我只输入一个值 (contact_id) 就可以了
所以您希望自动完成功能也适用于第二个输入？
是的，两个同时输入，因为id_client是隐藏类型
所以，如果我猜对了，是否希望如果您从自动完成中选择一个项目，它会将其设置为两个输入的值？

标签： javascript jquery html pdo

【解决方案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>

【讨论】：