Autocompleting从JSON数据的文本框在一个PHP文件 [英] Autocompleting textboxes from JSON data in a PHP file

问题描述

我有一个有点古怪的问题。我需要确保，在我的文本框的形式获得，在PHP脚本创建2 JSON对象的基础上，从形式另一个文本框用户输入自动填充。

I have a bit of a quirky problem. I need to make sure that textboxes in my form get autofilled with 2 JSON objects created in a PHP script based on user input from another textbox in the form.

HTML：

<p>Number: <input type="text" name="numbox" id="numbox" maxlength="10"></p>
<p>First Name: <input type="text" id="firstnamebox" maxlength="20" name="firstnamebox"></p>
<p>Last Name: <input type="text" id="lastnamebox" maxlength="20" name="lastnamebox"></p>

jQuery的：

jQuery:

$(document).ready(function () {
$("#numbox").keyup(function () {
    var el = $(this);

    if (el.val().length === 10) {
        $.ajax({
            url: "http://localhost/test.php",
            dataType: "json",
            type: "POST",
            data: {el.val()},
            success: function (result) {
                $("#firstnamebox").val(result.firstname);
                $("#lastnamebox").val(result.lastname);
            }
        });
    }
});
});

test.php的

test.php

<?php

$num=$_POST["numbox"];

if ($num="0123456789")
{
    $fill = array('firstname' => "John", 'lastname' => "Smith",);
    echo json_encode($fill);
}
else
{
    echo "Bad input.";
}

?>

JSON字符串的工作我的服务器上，所以我不认为我的PHP是坏的。该逻辑被认为是其中只要在0123456789用户键入到第一文本框，其他2获得分别填充约翰史密斯和。自动完成是不工作（可能是由于我的jQuery / AJAX code），所以我会AP preciate任何帮助，你可以给我的问候解决这个问题。

The JSON string works on my server, so I don't think that my PHP is bad. The logic is supposed to be where as soon as the user types in 0123456789 into the first textbox, the other 2 get populated with John and Smith respectively. The autocomplete is not working at all (probably due to my jQuery/AJAX code), so I would appreciate any help that you can give me in regards to solving this problem.

编辑：我​​想通了，通过错误控制台我的jQuery无法连接到我的本地主机的。我允许跨域通信解决了这个问题。必须添加

I figured out through the error console that my jQuery couldn't connect to my localhost. I fixed this by allowing cross-origin communication. Had to add

header("Access-Control-Allow-Origin: *");

我的PHP脚本允许连接的顶部。它也可以从你的服务器控制面板改变。接下来的问题是，由于我的jQuery的code。一个更加有经验的开发人员提出了一些code的变化，现在它看起来是这样的：

to the top of my PHP script to allow the connection. It can also be changed from your server control panel. Next issue was due to my jQuery code. A much more experienced developer suggested some code changes and now it looks like this:

$(function () {
$("#numbox").keyup(function () {
var el = $(this);

    if (el.val().length === 10) {
        $.ajax({
            url: "http://localhost/test.php",
            dataType: "json",
            type: "POST",
            data: "numbox="+el.val(),
            success: function (result, success) {
                $("#firstnamebox").val(result.firstname);
                $("#lastnamebox").val(result.lastname);
            }
        });
    }
});
});

我很高兴它的工作原理。感谢任何人帮助我​​与此有关。

I'm just glad it works. Thanks to anyone that assisted me with this.

推荐答案

试试这个，这是工作的罚款，我在我的系统中测试这一点。

try this, this is working fine,i've tested this in my system.

$(function () {
$("#numbox").keyup(function () {
    var el = $(this);

   if (el.val().length === 10) {

        $.ajax({
            url: "test.php",
            dataType: "json",
            type: "POST",
            data: {'numbox':el.val()},
            success: function (result) {

                //try to put alert(result); to see what response you've got

                response = jQuery.parseJSON(result);
                $("#firstnamebox").val(response.firstname);
                $("#lastnamebox").val(response.lastname);
            }
            error: function(error) {
            alert(error);
            }
            });
        }
    });
});

在的test.php

$num=(!empty($_POST["numbox"]))?$_POST["numbox"]:die('NUM is empty');

if ($num=="0123456789")//double equal to
{
    $fill = array('firstname' => "John", 'lastname' => "Smith",);
    echo json_encode($fill);
}
else
{
    echo "Bad input.";
}

这篇关于Autocompleting从JSON数据的文本框在一个PHP文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！