Php AJAX表单自动填充建议

我正在尝试创建一个html表单，它使用AJAX从mysql数据库中加载数据库条目作为用户类型，因此它会向用户建议这些条目

我对AJAX还不熟悉，对于经验丰富的人来说，这可能非常简单

我有以下html文本输入：

<form>
    <input  type="text" id="f" />
</form>

这就完成了我的工作，但我想知道：

1） 我是否使用了任何不良做法

2） 有没有更智能的方法将数据从php脚本传递到jQuery脚本

---

3） 在html中，我可以使用什么标记向用户显示建议？一个带有onclick函数的p来填充表单，或者有更好的吗？

我喜欢实现，你可以使用整个html/css/js包，或者只“窃取”html，或者只是阅读代码来获得一些灵感。

我会担心调用太多ajax。很可能有人打字很快。因此，如果我键入“abc”，那么您将进行3次ajax调用。很多开销。但是，如果您希望在发送之前实现一个延迟，比如300毫秒，那么脚本将在返回结果之前等待暂停

我发现一个短暂的（真的不明显的）延迟比建议中的闪烁要好

也可以考虑将此发布到CoDeVIEW（StAdvExcel的同伴站点）上。它更适合回答像这样的问题

以下是我所指的一个未经测试的例子：

$(function(){
    var timer;

    var getSuggestions = function() {
        $.ajax({
            url: 'getit.php',
            dataType: 'json',
            data: {'data' : $('#f').value},
            success: function(response){
                for(var i = 0; i < (response.rows*2); i = i+2){
                    alert('The name is ' + response[i] + ' ' + response[i+1])
                }
            }
        })
    });

    $('#f').keyup(function() {
        clearTimeout(timer);
        timer = setTimeout(getSuggestions, 300);
    });
});

$（函数（）{
无功定时器；
var getSuggestions=function（）{
$.ajax({
url:'getit.php'，
数据类型：“json”，
数据：{'data'：$（'f'）.value}，
成功：功能（响应）{
对于（变量i=0；i<（响应行*2）；i=i+2）{
警报（'名称为'+response[i]+''+response[i+1]）
}
}
})
});
$（'#f'）.keyup（函数（）{
清除超时（计时器）；
定时器=设置超时（getSuggestions，300）；
});
});

如果您使用的是Twitter引导程序Typeahead，请务必查看以下内容 （链接自）

基本上，它将一个keyup事件绑定到typeahead字段，该字段反过来进行AJAX调用，动态填充typeahead源。这一切都是在不修改Typeahead核心的情况下完成的

---

还有一个Twitter引导程序“Combobox”漂浮在周围。我不会链接到它，因为我最终使用了要点中的解决方案，但是如果您愿意，您可以自己搜索它。

看看jQuery UI Autocomplete：哦，为了回答您的问题：1）不是真的，如果我从头开始实现Autocomplete，我基本上也会这样做。2） 同样，从头开始构建，您使用的方法看起来非常简单。3） 因为您返回的是一个建议列表，

标记的无序列表是合适的。但是，如果你重新发明了轮子（已经有一些很好的实现了），你就必须弄清楚如何设置列表的样式并在适当的位置显示它，以及如何响应选择事件。这不是真正的重新发明。我只是想练习，因为我对AJAX一无所知。我提出这个问题是因为我的代码似乎不太容易维护——如果客户要求我在每个结果中多显示一行会怎么样？我必须在任何地方更改值。或者，如果我希望jQuery脚本使用相同的php文件只显示名称而不显示其他信息，该怎么办？将数据从php传递到jquery难道没有更聪明的方法吗？可能只有我一个人，但我的代码似乎有点“凌乱”……当然，我完全理解。“革新”是一个很好的学习练习。对于生产质量代码，您最好使用大众消费的东西，但学习是另一回事。我通常会将服务器脚本结果限制为合理的默认显示，如10行。但允许用户提供一个可选参数来覆盖默认值。您可能还希望jQuery脚本中有一个“minLength”参数。。。在某些情况下，在第一次击键时进行ajax调用可能没有意义。所以，是的，有很多方法可以改进它。@AnPel如果你在练习，试着用jQuery插件包装代码（比如自动完成）。这是一个提高代码可重用性的好方法。很好的贡献+1.我不太喜欢jQuery脚本中的for循环，因为如果将来我需要显示，比如说这个人的年龄，我将不得不改变一切。有没有一种方法可以将整个$row数组传递给jQuery并决定如何处理它？如果不想使用纯javascript，请签出jQuery的每个方法，或者查看下划线。如果是你不喜欢的样子，我同意。我通常用insertData这样的变量命名回调，然后将其传递到ajax调用中。它有助于提高可读性。还有，一个。。in或forEach循环对您来说可能是更好的选择。

//connect to database
//get variables an sanitize
$parameter = $_GET['data'];
$parameter = mysql_real_escape_string( $parameter );

//prepare and run query
$query = "SELECT email , surname , address FROM users WHERE email LIKE '$parameter%'";
$result = mysql_query($query);

//start preparing response
$seires = mysql_num_rows($result);
$response = array('rows'=>$seires);
while($row = mysql_fetch_array( $result ) ) {
    array_push( &$response , $row['onoma'] , $row['epwnimo'] );
    }
echo json_encode($response);

$(function(){
    var timer;

    var getSuggestions = function() {
        $.ajax({
            url: 'getit.php',
            dataType: 'json',
            data: {'data' : $('#f').value},
            success: function(response){
                for(var i = 0; i < (response.rows*2); i = i+2){
                    alert('The name is ' + response[i] + ' ' + response[i+1])
                }
            }
        })
    });

    $('#f').keyup(function() {
        clearTimeout(timer);
        timer = setTimeout(getSuggestions, 300);
    });
});