【问题标题】:google style autocomplete with arrow keys带有箭头键的谷歌风格自动完成
【发布时间】:2011-06-12 10:22:24
【问题描述】:

我创建了一个简单的搜索引擎,它使用 php 的“LIKE”函数(代码如下)显示 mysql 数据库结果。一切正常。我只想做到这一点,这样当用户开始打字时,他/她可以使用箭头键向下滚动并在像谷歌这样的项目上按 Enter。谢谢。我的代码:

HTML:

<input type="text" name='search' id="searchbooks" onkeyup='getbooks(this.value);'       value="search" onblur="setTimeout('removedrop()', 80);">

<div id='drop'></div>   

JAVASCRIPT:

function getbooks(value){
    if (value!=""){



    $.post('getbooks.php', {book: value},
        function (data) {
            $('#drop').html(data);
            doCSS();                
        });

        }
        else {

        $('#drop').html("");
        undoCSS();
        }

}
getbooks.php 文件:

<?php
include 'connect.php';

$book=mysql_real_escape_string(addslashes($_POST['book']));

$result=mysql_query("SELECT * FROM searchengine WHERE title LIKE '$book%'");


while ($row=mysql_fetch_assoc($result)){
$title=$row['title'];
$id=$row['id'];


echo "<div id='link'><a href='index.php?id=$id' id='words'>". $row['title'] ."</a></div>";

}
?>

【问题讨论】:

    标签: javascript ajax arrow-keys


    【解决方案1】:

    使用jQuery autocomplete plugin 怎么样?它正是为这个用例而设计的。

    【讨论】:

    • 嗯。我不确定我的另一半对此有何看法:P
    • @matt 我刚刚浏览了这些文件。对于这么小的调整,这似乎非常复杂。有没有另一种方法可以使用我已经拥有的代码来做到这一点
    • 抱歉,我实际上链接到了一个非常旧的版本。我更新了答案中的链接(和图片)。希望您会发现最新的自动完成功能更易于使用。
    • @matt 有没有办法让下拉项目链接?也是一种在用户滚动鼠标时从文本框中删除悬停名称的方法。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-05-13
    • 1970-01-01
    • 1970-01-01
    • 2023-03-06
    • 2017-02-01
    • 2014-03-31
    • 1970-01-01
    相关资源
    最近更新 更多