| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 563 人关注过本帖
标题:jquery仿机票输入提示如何调用?还没搞定!期望高手或有用过这效果的指教啊 ...
只看楼主 加入收藏
lxb0592
Rank: 1
等 级:新手上路
帖 子:108
专家分:0
注 册:2012-5-28
结帖率:86.67%
收藏
已结贴  问题点数:20 回复次数:1 
jquery仿机票输入提示如何调用?还没搞定!期望高手或有用过这效果的指教啊。
如图! 网上下的这个效果有2个文件夹(里面对应的是页面风格CSS文件和调用的JS文件),一个运行页面文件demo.htm。
图片附件: 游客没有浏览图片的权限,请 登录注册


运行demo.htm页面文件后会出现下面输入提示效果。
图片附件: 游客没有浏览图片的权限,请 登录注册


现在要的是如何把这种输入提示效果运用到自己页面中去。搞了一个多礼拜了,还没搞定。

demo.htm页面代码


程序代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>智能输入提示</title>

 <link rel="stylesheet" type="text/css" href="css/jquery.suggest.css">

 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

 <script type="text/javascript" src="js/j.dimensions.js"></script>

 <script type="text/javascript" src="js/aircity.js"></script>

 <script type="text/javascript" src="js/j.suggest.js"></script>

 <script type="text/javascript">

 $(function(){

 $("#arrcity").suggest(citys,{hot_list:commoncitys,dataContainer:'#arrcity_3word',onSelect:function(){$("#city2").click();}, attachObject:'#suggest'});
$("#city2").suggest(citys,{hot_list:commoncitys,attachObject:"#suggest2"});
});
</script>
</head>
<body>

 <div id="box">

 <h1>机票预定智能输入提示DEMO</h1>

 <input type="hidden" name="arrcity_3word" id="arrcity_3word" value="" />

 <label for="arrcity">出发城市:</label><input type="text" name="arrcity" id="arrcity" />

 <div id='suggest' class="ac_results">
 </div>

 <label for="city2">目的城市:</label><input type="text" name="city2" id="city2" />

 <div id='suggest2' class="ac_results">
 </div>
<p>具体的功能如下:</p>
<ol>
<li>点击输入框,自动列出热门出行城市;</li>
<li>支持中文/拼音/3字码 输入的智能提示;</li>
<li>支持键盘方向键选择、回车键确定;</li>
<li>支持选择后自定义callback函数;</li>
<li>支持IE6、IE7、IE8、Firefox</li>
</ol>
</div>
</body>
</html>
注意红色代码!
我自己页面也有这2行代码但和这个略有不同,这是我自己的页面这2行代码
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="../style/style.css" rel="stylesheet" type="text/css">
是不是这2行代码导致的不能调用? 但是把上面红色代码复制到我这里面,也不能实现输入智能提示效果,而且还出现乱码。高手指教啊!! 这么好的效果用不上 干着急啊!!!

搜索更多相关主题的帖子: 效果 如何 风格 
2012-09-10 13:33
yms123
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:209
帖 子:12488
专家分:19042
注 册:2004-7-17
收藏
得分:20 
你要把.js文件一起引用到你调用的页面,同时还有.css样式文件
然后在调用页面加上demo的引用代码即可
<link rel="stylesheet" type="text/css" href="css/jquery.suggest.css">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/j.dimensions.js"></script>
<script type="text/javascript" src="js/aircity.js"></script>
<script type="text/javascript" src="js/j.suggest.js"></script>
<script type="text/javascript">
$(function(){
$("#arrcity").suggest(citys,{hot_list:commoncitys,dataContainer:'#arrcity_3word',onSelect:function(){$("#city2").click();}, attachObject:'#suggest'});
$("#city2").suggest(citys,{hot_list:commoncitys,attachObject:"#suggest2"});
});
</script>
注意,文本框的id不要改,改了js调用不到了
2012-09-12 10:04
快速回复:jquery仿机票输入提示如何调用?还没搞定!期望高手或有用过这效果的指 ...
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.022596 second(s), 10 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved