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

Autocomplete multiple value from database

本文关键字：数据库      更新时间：2023-09-26

我之前已经完成了这个问题。然而，我有另一个问题。我想做多个自动补全，比如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 code 

    $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>';
   }

我不确定我是否正确理解你在寻找什么。我已经提供了一个示例，可以帮助您入门。我所包含的计时器是为了尽量减少您将要执行的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>

相关文章：