jquery suggest修改版(支持中文),类似google suggest的下拉提示

  项目中需要做类似google suggest的效果,在jquery插件库中找到一个jquery.suggest,效果挺好,但对中文的支持有问题,因为输中文不像输中文那样,按一下键盘直接输出。所以使用中会出现输入中文不显示下拉菜单等情况。下面分享一个我修改后的代码。

下载地址:
jquery
jquery.suggest修改版

简单介绍下使用方法:

1.将jquery和jquery.suggest上传到网站。

2.在需要引用的页面调用

<script type=”text/javascript” src=”js/jquery1.3.2.js”></script>
<script type=”text/javascript” src=”js/suggest/jquery.suggest.js”></script>
<link rel=”stylesheet” href=”js/suggest/jquery.suggest.css” />

3.使用

<script type=”text/javascript”>
    $(document).ready(function() {
        $(“#newtel”).suggest(“ajaxback.php?act=newtel”,{
            onSelect: function() {alert(this.value);}
                }            );        }    );
</script>

其中#newtel换成输入框的ID,ajaxback.php换成ajax服务端的地址.

4.服务端 ajaxback.php

<?
$q=$_GET[‘q’];     //jquery.suggest会将输入框的当前值以GET方式传到ajax服务端,并放在变量$_GET[‘q’]中
for($i=1;$i<=10;$i++)
{
    echo $q.$i.’n’;    //输出用n换行,每行对应下拉框的每一项
}
?>

5.快捷键

下拉框显示后,上下键选择,空格键选中。当然也可以用鼠标键选。

这里也对原jquery.suggest做了点修改,原程序是按回车键选中,我将这里改成按空格键选中。因为国内有些浏览器(比如傲游)在按回车时会提交表单。

如果还有不明白的地方可以联系我哦~

11 评论

  1. 有点问题,比如说:我想在输入a的时候,b就不要显示了。
    可是b还显示,只是在a下面加了一条线标记一下而已。
    是不是css的问题。我去修改一下css看看。
    光标在输入框最前方的时候显示全部就可以。
    这方面jquery.flexselect做得很好,也漂亮。只是不支持中文。

发表评论

电子邮件地址不会被公开。 必填项已用*标注