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、显示样式

选中一个到文本框

搜索框下面显示提示数据(数据是ajax读取)的更多相关文章

  1. (八)solr7实现搜索框的自动提示并统计词频

     solr7实现搜索框的自动提示并统计词频 1:用solr 的suggest组件,统计词频相对麻烦. 2:用TermsComponent,自带词频统计功能. Terms组件提供访问索引项的字段和每个词 ...

  2. Ajax跨域:Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  3. typecho博客组插件:openSug.js百度搜索框下拉提示免费代码

      Typecho候选搜索增强插件:安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让Typecho搜索更便捷! 支持百度.谷歌.雅虎.Yandex.360好搜.UC神马.酷狗.优酷.淘 ...

  4. java_前端_autocomplete_搜索框自动匹配提示

    效果图: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> < ...

  5. win10 搜索框输入没提示

    1.点击win, 手动在应用里找到Cortana(小娜) 2. 点右键->更多->应用设置,进入到下面的界面 3. 下拉到最下面,找到“重置”即可

  6. Servlet+Ajax实现搜索框智能提示

    简介:搜索框相信大家都不陌生,几乎每天都会在各类网站进行着搜索.有没有注意到,很多的搜索功能,当输入内容时,下面会出现提示.这类提示就叫做搜索框的智能提示,本门课程就为大家介绍如何使用Servlet和 ...

  7. Ternary Search Tree 应用--搜索框智能提示

    前面介绍了Ternary Search Tree和它的实现,那么可以用Ternary Search Tree来实现搜索框的只能提示,因为Ternary Search Tree的前缀匹配效率是非常高的, ...

  8. 图片轮播(bootstrap)与 圆角搜索框(纯css)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. 修改IE8搜索框为指定搜索引擎,如CSDN、百度知道等

    1.运行regedit打开注册表编辑器2.找到\HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchScopes\3.添加新搜索项 ...

随机推荐

  1. PostgreSQL——服务器配置_{postgresql.conf}

    一.设置参数 所有参数名称都是不区分大小写的 值为字符串时,需要单引号 值为数值时不需要单引号,但带单位时,需要单引号 配置文件(如:postgresql.conf.postgresql.auto.c ...

  2. hdu 6435 /// 状压

    题目大意: 给定 n m k 为 n种主武器 m种副武器 武器有k种属性 接下来n行 先给定当前主武器的综合分s1 再给定k种属性的值 接下来m行 先给定当前副武器的综合分s2 再给定k种属性的值 要 ...

  3. USACO2012 overplanting /// 矩阵切割 递归 oj21547

    题目大意: 在农场的任何一个“轴向对齐”的长方形区域(即垂直和水平方向)种植草坪. 现种植了N(1≤ N ≤10)个不同的矩形区域,其中一些甚至可能重叠. Input Multiple test ca ...

  4. 如何用json 与jsonp 的区别去回答你的面试官?

    常常 有面试官这样问我们,虽然用过无数次,但是回答不上岂不是尴尬,那我们浅析一下它们的区别? 1. json JSON是一种基于文本的数据交换格式,用于描述复杂的数据,举个例子: var nax=[ ...

  5. 笔记48 Spring+SpringMVC+Hibernate整合

    搭建Spring+SpringMVC+Hibernate的框架的思路如下: 1.创建Maven项目,按需映入Maven包依赖. 2.搭建Spring:配置Spring对控件层Bean的注入. 3.搭建 ...

  6. vue 外卖app (1) 项目目录介绍

    api 与后台交互文件夹 common 通用资源文件夹 components  非路由组件文件夹 filters   自定义过滤器模块文件夹 mock 模拟数据文件夹 pages  路由组件文件夹 r ...

  7. Hbase和Hive在大数据架构中处在不同位置

    先放结论:Hbase和Hive在大数据架构中处在不同位置,Hbase主要解决实时数据查询问题,Hive主要解决数据处理和计算问题,一般是配合使用.一.区别:Hbase: Hadoop database ...

  8. 线程池 一 ThreadPoolExecutor

    java.util.concurrent public class ThreadPoolExecutor extends AbstractExecutorService ThreadPoolExecu ...

  9. delphi JPG转为BMP存入数据库

    delphi  JPG转为BMP存入数据库   必须在uses中引用JPEG procedure TForm1.BitBtn3Click(Sender: TObject);varjpg:TJPEGim ...

  10. lua数据类型与变量

    Lua数据类型与变量 Lua中有  8个基本类型分别为: nil.boolean.number.string.userdata.function.thread和 table. lua变量三种类型:全局 ...