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做了点修改,原程序是按回车键选中,我将这里改成按空格键选中。因为国内有些浏览器(比如傲游)在按回车时会提交表单。

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

标签: ,

关于 虫少侠