jQuery自动完成功能,通过选择建议的选项来填充多个字段

时间:2018-08-03 08:02:09

标签: php jquery autocomplete jquery-ui-autocomplete

我有自动完成的jQuery脚本,用于在页面上的表单字段(3个输入字段)中键入内容时从MySQL数据库中提取建议。 一切正常,但是当我在第一个字段中选择建议的选项时,我想要的是-所有3个字段都应填写。 我现在拥有的字段是名字,姓氏和公司。当我选择名字-姓氏和公司应自动填充数据。

这是php:

<html>
<head>
 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">       
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() 
{
 $( "#first_name" ).autocomplete({
  source: 'autocomplete.php'
 });
});
$(function() 
{
 $( "#last_name" ).autocomplete({
  source: 'autocomplete.php'
 });
});
$(function() 
{
 $( "#company" ).autocomplete({
  source: 'autocomplete.php'
 });
});
</script>
</head>
<body>
<div id="wrapper">

<div class="ui-widget">
 <p>First name</p>
 <input type="text" id="first_name">
</div>

<div class="ui-widget">
 <p>Last name</p>
 <input type="text" id="last_name">
</div>

<div class="ui-widget">
 <p>Company</p>
 <input type="text" id="company">
</div>

</div>
</body>
</html>

这是autocomplete.php文件:

<?php

$host="localhost";
$username="user";
$password="password";
$databasename="dbname";

$connect=mysql_connect($host,$username,$password);
$db=mysql_select_db($databasename);

$searchTerm = $_GET['term'];

$select =mysql_query("SELECT * FROM jemployee WHERE first_name LIKE '%".$searchTerm."%'");
while ($row=mysql_fetch_array($select)) 
{
$spojeno = $row['first_name'] . ' ' . $row['last_name'] . ' ' . $row['kompanija'];
$data[] = $spojeno;
}
//return json data
echo json_encode($data);
?>

因此,当选择“ first_name”中的建议选项时-“ last_name”和“ company”应使用数据库中的相应数据填充。有什么建议吗?

1 个答案:

答案 0 :(得分:0)

使用Jquery喜欢的东西:

$(document).on('keyup', '#firstname', funtion(){ $.ajax({ type:"POST", url:"ajax.php", data:$("#firstname").val(); }, success:function (res){ $("#lastname").val(res.lastname); $("#company").val(res.company); }, )}; });

和PHP ajax.php文件:

<?php

\\Select lastname, company with $_POST['data']

echo json_endcode($result);

应检查并处理ajax响应。如果可以的话,请改进它。