搜索框下面显示提示数据(数据是ajax读取)
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读取)的更多相关文章
- (八)solr7实现搜索框的自动提示并统计词频
solr7实现搜索框的自动提示并统计词频 1:用solr 的suggest组件,统计词频相对麻烦. 2:用TermsComponent,自带词频统计功能. Terms组件提供访问索引项的字段和每个词 ...
- Ajax跨域:Jsonp实例--百度搜索框下拉提示
Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...
- typecho博客组插件:openSug.js百度搜索框下拉提示免费代码
Typecho候选搜索增强插件:安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让Typecho搜索更便捷! 支持百度.谷歌.雅虎.Yandex.360好搜.UC神马.酷狗.优酷.淘 ...
- java_前端_autocomplete_搜索框自动匹配提示
效果图: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> < ...
- win10 搜索框输入没提示
1.点击win, 手动在应用里找到Cortana(小娜) 2. 点右键->更多->应用设置,进入到下面的界面 3. 下拉到最下面,找到“重置”即可
- Servlet+Ajax实现搜索框智能提示
简介:搜索框相信大家都不陌生,几乎每天都会在各类网站进行着搜索.有没有注意到,很多的搜索功能,当输入内容时,下面会出现提示.这类提示就叫做搜索框的智能提示,本门课程就为大家介绍如何使用Servlet和 ...
- Ternary Search Tree 应用--搜索框智能提示
前面介绍了Ternary Search Tree和它的实现,那么可以用Ternary Search Tree来实现搜索框的只能提示,因为Ternary Search Tree的前缀匹配效率是非常高的, ...
- 图片轮播(bootstrap)与 圆角搜索框(纯css)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 修改IE8搜索框为指定搜索引擎,如CSDN、百度知道等
1.运行regedit打开注册表编辑器2.找到\HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchScopes\3.添加新搜索项 ...
随机推荐
- 如何使用Intellij IDEA工具导入SVN项目
Intellij IDEA是目前主流的IDE开发工具,工程项目导入也是必不可少的操作,本文讲述如何用 IDEA工具导入SVN项目. 步骤一:选择VCS打开Intellij IDEA开发工具,在导航栏中 ...
- svn向服务器添加新建文件夹
tip: 1)提交文件分为两步,先将要提交的文件加入缓存区,然后将文件提交 2)add:添加的意思.commit:提交的意思 第一步:加入缓存区(如图) 1)选择要提交的文件 2)右键svn---&g ...
- 剑指offer——75不用加减乘除做加法
题目描述 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 题解: 使用位运算 class Solution { public: int Add(int num1 ...
- 在vue中获取不到canvas对象? 两种解决办法。
1. mounted 钩子函数 初次肯定获取到id 2. 如果canvas父级用到了v-if 请改成v-show ,vue Dom节点 重新渲染导致methods 方法获取不到对象.
- GetModuleHandleW 分析
首先查询MSDN,可以清楚地看到 位于kernel32 dll 里面. 有目标就好办,找到这个dll,然后,开工,进入IDA. 跳啊 就到下面那块了. 遗憾的是...显然不是这里阿,实际上下一块调用的 ...
- 【HDOJ】 P2054 A == B ?
题目意思不太多解释,具体WA的情况可以举出一下特例 0 +0 0.00 0 +1 -2 +1.00 -1.00 +.2 -.2 .0 .1 等等 不过可以发现对上面的数据处理,可以分为以下几步 1.找 ...
- frp 配置多个 web 项目,无需购买域名 (访问内网可视化界面,jupyter noterbook, visdom, tensorboard)
frp 配置多个 web 项目,无需购买域名 简单配置,参考 前言: 网上也有很多教程包括官方文档,都需要购买域名,并且把 frpc.ini 中 [web]节配置的 custom_domains 的 ...
- 配置 jaco机械臂 ros环境
---恢复内容开始--- 终于有机械臂了, 首先先下载包 cd ~/catkin_ws/src git clone https://github.com/Kinovarobotics/kinova-r ...
- centos6.5下,使用虚拟ftp用户
因为业务的问题,有位客户的账户总是出现各种问题,本人对于acl的使用又不是很会,所以和同事一起研究了一下这个虚拟ftp用户. Centos6.5 1 需求 为了保证系统的安全性,现对系统中vsftpd ...
- BCZM : 2.1
1.问题描述 实现一个函数,输入一个无符号整数,输出该数二进制中的1的个数.例如把9表示成二进制是1001,有2位是1,因此如果输入9,该函数输出2 2.分析与解法 解法1:利用十进制和二进制相互转化 ...