下拉框提示功能-JavaSript-爱易网页

下拉框提示功能

日期：2014-05-16　浏览次数：20461 次

下拉框提示功能求助！

<html>

<body>

<p>天气查询：</p>

    <form action="/weather/" method="get">

        <input type="text" name="weather_search" rows="2" cols="40"></input>

        <input type="submit" value="Search">

    </form>

</body>

</html>

各位高手，请问我应该如何将中国天气网http://www.weather.com.cn/weather/101010100.shtml 那个城市输入框移植到我上述代码中，替换该输入框，实现下拉框中能提示城市的功能！
比如输入“北”，下拉框能提示与“北”相关的城市！
------解决方案--------------------
Jquery AutoComplete
------解决方案--------------------
你的自己实现布局，得有城市的维护数据，然后根据需要显示出不同的提示效果

不然你就去扒人家的布局，和人家所用到数据

如果仅仅通过简单的移植，实现类似的效果，那么我想冒牌网站得漫天飞了
------解决方案--------------------

引用:

Jquery AutoComplete

正解
需要增加input 的onchange事件 ,就是比如你输入一个"北" , 输入框内容发生变化 ,触发onchange事件在该事件处理程序中通过ajax获取数据库与"北"相关的城市地址列表,生成下拉列表让你选择需要使用如Jquery AutoComplete控件,实现较为简单
------解决方案--------------------

引用:

实现简单么，可是我完全不会js，能不能帮忙写个demo呢，不甚感激

你去下一个里面都有demo的也有函数的介绍api手册对着看就好了
------解决方案--------------------
示例仅供参考



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>autocomplete测试</title>



<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css" />

<style>img{width:30px;height:30px;}</style>

<script src="jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>

<script src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>

</head>



<body>

<input type="text" id="autocompleteTest" autocomplete="off" name="q" value="autocomplete测试" onfocus="if(this.value=='autocomplete测试'){this.value='';}" onblur="if(this.value=='') {this.value = 'autocomplete测试';}" class="ui-autocomplete-input">





<script type="text/javascript">

var json=[{label:"aaa",pictureurl:"http://www.baidu.com/img/bdlogo.gif",url:"http://www.baidu.com"},{label:"bbbbb",pictureurl:"http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png",url:"http://www.sina.com"}];

$(function () {

	$('#autocompleteTest').autocomplete({

		delay: 500,

		minLength: 1,

		source: json,//这里为了测试，直接定义了一个json对象，实际应用中通常是一个url地址

		select: function( event, ui ) {

			$("#autocompleteTest").val(ui.item.label);

			//location=(ui.item.url);

			return false;

		}

	}).data("ui-autocomplete")._renderItem = function( ul, item ) {

		var t = item.label;

		

		return $("<li></li>")

		.data("item.autocomplete", item)

		.append("<a><img src='" + item.pictureurl + "'>" + t + "</a>"

		).appendTo(ul);

	};

});



&

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

下拉框提示功能

相关资料更多>

推荐阅读更多>