使用 jQuery 进行“自动填充”第二个文本框，基于第一个文本框的输入

Question

好吧，基本上我想做的是使用文本框的值（在大多数情况下是自动完成的）来填充另一个文本框，其中包含从数据库中提取的数据。

用户将在一个框中输入姓名，一旦该输入失去焦点，第二个框中就会自动填充该姓名的关联电子邮件地址。

我见过一些不同的 jQuery 插件，它们与我想要的类似，但仅适用于选择（我不想要它，因为该名称可能是要添加的新名称）。

我知道有人会说这样的话：“好吧，为什么不从数据库中提取姓名和电子邮件地址并在页面加载时填充表单。”答案是：因为名称将被动态添加（当您添加新订单时，请按照订单跟踪软件的思路思考）。

我使用 PHP、MySQL，当然还有 jQuery。

提前致谢。

Answer 1

你不需要插件来做到这一点，只需使用模糊事件调用 $.post

$("#name").blur(function () {
    $.post(your_php_file, { name: $(this).val() }, function (data) {
        $("#email").val(data);
    });
});

在你的 php 文件中，你将能够使用 $_POST["name"] 获取名称要将电子邮件发送回 javascript，只需回显它。

如果您需要加载的数据不仅仅是字符串，您应该使用 json_encode() 来编码数组

$name = $_POST["name"];
//pick data from db
$arr = array("email"=>$email, "otherstuff"=>$otherstuff);
echo json_encode($arr);

并将您的 post 调用更改为：

$.post(your_php_file, { name: $(this).val() }, function (data) {
    $("#email").val(data.email);
    $("#otherstuff").val(data.otherstuff);
});

Answer 2

你可以做这样的事情...

$('#input_1').blur(function(){ // blur event, when the input box loses focus...
   var data = this.value;     // get the data of the this inputbox, in our case id="input_1"
   $.ajax({
       url: 'some/url.php', // your php that is used to query MySql
       method: 'get',       // method to be used , get/post
       data: {
           'foo' : data // the data to be passed, e.g. ?foo=data
       }
       success : function(msg){   // when connection to server is successful, msg is the data returned from 'some/url.php'
           $('#input_2').val(msg); // populate the second inputbox with msg... 
       }
   });
});

从上面的 jQuery 代码中，你可以在 php 中执行 $_GET['foo']...并且你应该 echo第二个输入框需要数据......

Answer 3

客户端可能如下所示：

$('#name').blur(function(){
  str = $('#name').val()
  $.get("lookupemail.php", { name: str}, function(data){
    $('#email').val( data );
  });      
});

当“名称”字段失去焦点时，向 Lookupemail.php 发送请求，并将参数“名称”设置为“名称”字段。当请求返回时，将其放入“电子邮件”字段中。