1、前台页面

 <div style="margin: 0 auto">
<input type="text" id="wenxiantxt" onkeyup="ClickEvent()" style="width: 250px; height: 25px" />
<ul id="all" style="width:250px;height: auto; margin-top: 0px;">
</ul>
</div>

2、后台代码

 [WebMethod]
public static string GetJson(string urls)
{
HttpWebRequest request = (HttpWebRequest)WebRequest.Create(urls);
request.Method = "GET";
request.ContentType = "application/json; charset=utf-8";
HttpWebResponse response = (HttpWebResponse)request.GetResponse();
Stream myResponseStream = response.GetResponseStream();
StreamReader myStreamReader = new StreamReader(myResponseStream, Encoding.UTF8);
string retString = myStreamReader.ReadToEnd();
myStreamReader.Close();
myResponseStream.Close(); return retString; }

3、jquery

<style type="text/css">
ul li
{
list-style: none;
font-size: 12px;
text-decoration: none;
color: gray;
cursor: pointer;
padding: 0px;
margin-left: -35px;
}
</style>
<script type="text/javascript">
function ClickEvent() {
urls = "http://www.suggest?&q=hiv&src=cn";
$.ajax({
type: "Post",
async: false,
url: "2_sousuotishi.aspx/GetJson",
contentType: "application/json; charset=utf-8",
data: "{urls:'" + urls + "'}",
dataType: "json",
success: function (data) {
var jsondata = eval("(" + data.d + ")");
$("#all").empty();
//debugger;
for (var i = ; i < jsondata['data'].length; i++) {
var html2 = "";
html2 += "<li>" + jsondata['data'][i] + "</li>";
$("#all").append(html2);
}
//选择搜索提示的文本到搜索框
$("li").on("click", function () {
$("#wenxiantxt").val($(this).text());
$("#all").html("");
});
$("li").mousemove(function () {
$("li").css("background-color", "");
$(this).css("background-color", "gray");
$("li").css("color", "gray");
$(this).css("color", "white");
});
},
error: function (err) {
alert("error!");
}
});
}
</script>

4、显示样式

选中一个到文本框

最新文章

  1. Strust2初之体验
  2. SQL中JOIN 的用法
  3. angularJS ng-grid 配置
  4. 织梦dedecms调用子栏目的方法
  5. CATransition(过渡)
  6. WEBrick/Rack Puppet Master
  7. 【HDOJ】3068 最长回文
  8. Android 数据库读取数据显示优化 Application [6]
  9. zookeeper 同步
  10. .NET接入接口/请求服务器
  11. 【手记】解决EXCEL跑SQL遇“查询无法运行或数据库表无法打开...”
  12. 手动用tomcat启动war包,无法访问web项目
  13. Oracle 10g RAC OCR、Voting disk更换
  14. easyUI 学习
  15. SQL Server datetime类型转换超出范围的报错
  16. 动态规划_线性dp
  17. Spring Bean后置处理器
  18. wordpress WP-PageNavi分页
  19. 关于PermGen space内存溢出错误解决方法
  20. SharePoint 列表多表联合查询

热门文章

  1. SQL中Truncate语法
  2. Java 设计模式之 装饰者模式
  3. Java调用Linux下的shell命令并将结果以流的形式返回
  4. Boost.Interprocess
  5. Homestead 安装其它的PHP版本
  6. SpringBoot 之 Mybatis 逆向工程
  7. 继承中的隐藏(hide)重写(Override)和多态(Polymorphism)
  8. BeautifulSoup 爬虫
  9. 线程池 一 ThreadPoolExecutor
  10. PDO::beginTransaction