Question

我不知道这个效果叫什么。我想要实现的效果如下：
考虑3个字段：name, phonenumber, email
我想要的是当我开始输入名称，自动填充列表来完成名称（存储在数据库中），然后在我选择名称后， Fetches来自数据库中同一行的phonenumber和email 的相应值，并将其填入剩余的2个文本字段。
与google auto fill有点类似。
请帮我一些好的插件或技巧。

Answer 1

你看过jqueryui＆＃39; s autocomplete了吗？这基本上是一个自动完成功能。您可以使用ajax请求从服务器获取数据并使用一些javascript来填充剩余的字段。

因此，通常有两个部分可以做到这一点：

服务器上的一些脚本从数据库中获取数据。
javascript以完成自动完成功能

因此，对于第一部分，您可以按如下方式进行：

根据您的需要修改以下脚本，并保存为例如。 getusers.php。

    // replace by your data
$DB_server = "your DB server address";
$DB_user   = "your DB user name";
$DB_pass   = "your DB password";
$DB_name   = "name of your database";
   // connect to database server
$conid = mysql_connect($DB_server, $DB_user, $DB_pass); 
if (!$conid){ die("Database connection failed: " . mysql_error()); }
    // select database
$db_select = mysql_select_db($DB_name, $conid);
if (!$db_select){ die("Database selection failed: " . mysql_error()); }

    //query data
$result = mysql_query("SELECT * FROM `user`", $db_select);
if (!$result){ die("Database query failed: " . mysql_error()); }

$userData = array(); // for all users

while ($row = mysql_fetch_array($result)){
        $user = array(); // a single users data
        $user[0] = $row['name']; // use your column names here
        $user[1] = $row['phone']; 
        $user[2] = $row['email']; 
        $userData[] = $user; // add to collection of users
}

    // disconnect
mysql_close($conid);
    // convert to json for JS
return json_encode($userData);

这里是javascript：

here是您的用例的原型（仅自动完成部分）

这是一个用于从服务器获取用户数据的ajax代码段：

$(document).ready(function(){
    $.ajax({        // call php script
        url: 'getusers.php',
        type:'GET',
        timeout: 500,
        contentType: 'html'
    }).success(function(JSONdata, status, settings) {

              // add autocompletion snippet here

    }).error(function(jqXHR, textStatus, errorThrown){
            // in case something went wrong, show error
       alert('Sorry, something went wrong: ' + textStatus + ' (' + errorThrown + ')');
    });
});

这是一个简单的自动完成脚本代码段。你必须将它粘贴到ajax调用的success部分，并用通过ajax调用返回的php脚本中传递的JSON数据替换aTestData数组。

    // assuming JSONdata something like:
var aTestData = [ 
                  ["Joe", "0123456789", "joe@here.com"],
                  ["Jim", "1234567890", "jim@here.com"],
                  ["Rose", "2345678901", "rose@here.com"] 
                ];

               // put together names to be used as autocompletion values
           var aNames = [];
           $.map(aTestData, function(item, i) {
             aNames.push({
                           label: item[0],
                           data: [item[1], item[2]]  
                         });
           });
               // add autocomplete functionality 
           $('#name').autocomplete({
                minLength: 0,
                source: aNames,
                select: function( event, ui ) {
                      // insert additional texts in input fields
                  $('#phone').val(ui.item.data[0]);
                  $('#email').val(ui.item.data[1]);
                }
           });

使用ajax在单个选择中自动完成多个字段

1 个答案:

因此，对于第一部分，您可以按如下方式进行：

这里是javascript：