项目中需要做类似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做了点修改,原程序是按回车键选中,我将这里改成按空格键选中。因为国内有些浏览器(比如傲游)在按回车时会提交表单。
如果还有不明白的地方可以联系我哦~
如果是 asp.net怎么做
@aa
asp.net也一样 客户端的内容不用改,只需要改服务端就可以了.第4步中的ajaxback.php改为你的asp的代码就可以了
下载不料了
@a
现在可以了
感谢楼主,但中文的还要按别的键才出来。和数据库连接要通过iconv函数转换。
嗯 有待改善
中文就是麻烦些
有点问题,比如说:我想在输入a的时候,b就不要显示了。
可是b还显示,只是在a下面加了一条线标记一下而已。
是不是css的问题。我去修改一下css看看。
光标在输入框最前方的时候显示全部就可以。
这方面jquery.flexselect做得很好,也漂亮。只是不支持中文。
请问,我想要像GOOGLE那样上下移动的时候input.value也跟着变。要如何做到呢?
请问如何向后台传参数
如果返回的是json怎么处理
假设返回的是data,则
var obj = eval(‘(‘ + data + ‘)’);
就可以把json转换成对象了