Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何在Google风格中添加来自ajax call的实时搜索结果?

如何在Google风格中添加来自ajax call的实时搜索结果?
EN

Stack Overflow用户
提问于 2016-02-02 13:37:15
回答 1查看 729关注 0票数 2

我有一个Ajax live search函数,它可以成功地返回它需要返回的值。但我只需要像Google或Youtube那样列出结果,我不知道怎么做(这是我第一次使用实时搜索功能)。所以我需要像这样简单地返回这些值:

下面是我当前的索引页面代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<input type="text" value="" name="s" id="s" placeholder="Search">
<input type="submit" id="searchsubmit" value="Search" class="prefix button">

<ul id="searchresults" class="searchresults"></ul>

下面是我的ajax函数:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(document).ready(function() {

$('#s').typeWatch({
    captureLength: 2,
    callback: function(value) {

       $.ajax({
         type : "post",
         dataType : "json",
         url : myAjax.ajaxurl,
         data : {action: "searchq", s : value},
         success: function(response) {
            if(response.type == "success") {
               $.each(response.val,function(){
                  var li = $('<li/>').appendTo('#searchresults');
                  $('<a/>').text(this.post_title).attr('href',this.url).appendTo(li);       
               });
            }
          },
          error: function(errorThrown) {
          }
      })
   }
});//end typewatch event

});

这将返回如下结果:

搜索结果确实会以列表的形式出现,但它与谷歌或youtube不同,在后者中,你可以用箭头键滚动搜索结果。

当我点击第二张图片中的输入表单时,我看到标准的下拉列表显示在它上面,这正是我想要的结果的显示方式(但这只显示我之前输入的内容)。

所以我的问题是,我如何在那里得到我的结果,或者创建它?

我希望这足够清楚地理解我正在尝试获得的东西。

(我选择不包含php函数,因为它是100%正常工作的)

EN

回答 1

Stack Overflow用户

发布于 2016-12-30 00:34:45

您希望将文本输入的autocomplete属性设置为"off“,以禁止以前输入的文本出现在下拉列表中。例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<input type="text" autocomplete="off">

w3schools上提供了autocomplete属性的审查。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35155031

复制
相关文章
Emacs的Server Client模式
Emacs的server/client模式只需要加载一次配置文件,所以打开文件会快一些。
ExASIC
2022/03/29
9370
Python 引号、注释、字符串
Python3.6.3    json==2.0.9    win10.0.17134
用户7886150
2021/01/13
9410
Emacs 系列(一):抛掉一切,投入 Emacs 和 org 模式的怀抱
长期以来,我一直对如何组织安排事情感到沮丧。我也有用过 GTD 和 ZTD 之类的方法,但是像邮件或是大型文件这样的事务真的很难来组织安排。
用户1880875
2021/09/23
8420
用于前端的后端模式
创建单独的后端服务,供特定的前端应用程序或接口使用。 要避免为多个接口自定义一个后端时,此模式十分有用。 此模式最先是由 Sam Newman 描述的。
只喝牛奶的杀手
2019/09/02
8010
用于前端的后端模式
【Python】字符串 ① ( Python 字符串定义形式 | 单引号定义法 | 双引号定义法 | 三引号定义法 | 字符串中包含单引号或双引号的处理方式 )
文章目录 一、Python 字符串定义形式 二、字符串中包含 单引号 / 双引号 一、Python 字符串定义形式 ---- Python 字符串定义形式 : 单引号定义法 : name = 'Tom' 双引号定义法 : name = "Tom" 三引号定义法 : 该定义方式与多行注释相同 , 使用 三引号 定义字符串 : 如果使用变量接收 , 那么定义的就是字符串 ; 如果没有变量接收 , 那么定义的就是多行注释 ; name = """Tom""" 代码示例 : # 单引号定义字符串 nam
韩曙亮
2023/04/07
3.1K0
【Python】字符串 ① ( Python 字符串定义形式 | 单引号定义法 | 双引号定义法 | 三引号定义法 | 字符串中包含单引号或双引号的处理方式 )
[oeasy]python0052_ raw格式字符串_单引号_双引号_反引号_ 退格键
转义字符回忆上次内容最近玩的是\n、\r 之外的转义序列 \a是 ␇ (bell)\t是 水平制表符\v是 换行不回车通过 16 进制数值转义 \xhh把(hh)16 进制对应的 ascii 字符输出通过 8 进制数值转义 \ooo把(nnn)8 进制对应的 ascii 字符输出这次加了 转义输出 反斜杠本身 \\ 输出 \总是转义 还是挺麻烦的能否直接输出原样输出呢?搜索帮助找到raw stringrawr的含义是 raw原始原样如果是有r就原样输出为什么raw就是原始原样呢?raw生的食物 没有
oeasy
2023/01/17
1.7K0
[oeasy]python0052_ raw格式字符串_单引号_双引号_反引号_ 退格键
Python字符串的填充和计数
文章链接: https://icodeq.com/2021/407b23e3fd44/
Zkeq
2022/05/18
1K0
EasyDSS出现突发高访问导致直播中断,该如何处理?
随着视频直播领域的蓬勃发展,视频直播点播平台EasyDSS在该领域的应用也得到快速普及,如智慧课堂、智慧教育、城市慢直播、智慧文旅等。EasyDSS稳定流畅的推拉流与直播、点播功能,以及强大的系统兼容性,能满足用户的多元化场景需求。
TSINGSEE青犀视频
2022/02/11
3160
EasyDSS出现突发高访问导致直播中断,该如何处理?
导致SaaS免费模式失败的原因
1999年,成立四年的法国初创公司 Vistaprint 在竞争激烈的美国市场推出了基于互联网的印刷服务。Vistaprint团队不把目标对准大公司(这些公司会在印刷上花费更多的钱) ,而是把目标对准了微型企业(这些企业在当时被认为是一个糟糕的市场,因为它们几乎无法触及)。
人称T客
2020/09/08
9050
导致SaaS免费模式失败的原因
【“别跟我不会”系列】Java设计模式之策略模式
一直以来,笔主想写关于设计模式的系列文章与大家进行交流,但碍于自己经验上尚浅,无法将此讲解透彻,闹了笑话。但千里之行,始于足下,我决定将我自己的工作中我用到的设计模式与大家分享交流,有不妥还望大家指出。
23号杂货铺
2019/09/27
3950
python 去除字符串两端的引号[通俗易懂]
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/133295.html原文链接:https://javaforall.cn
全栈程序员站长
2022/06/27
9760
json.loads()的字符串中为单引号引发的错误
Traceback (most recent call last): File "G:/FastWorkStateServer/logs/redis_fabu.py", line 20, in <module> print(json.loads(str2)) File "D:\python3.6.5\lib\json\__init__.py", line 354, in loads return _default_decoder.decode(s) File "D:\python3.6.5\lib\json\decoder.py", line 339, in decode obj, end = self.raw_decode(s, idx=_w(s, 0).end()) File "D:\python3.6.5\lib\json\decoder.py", line 355, in raw_decode obj, end = self.scan_once(s, idx) json.decoder.JSONDecodeError: Expecting property name enclosed in double quotes: line 1 column 2 (char 1)
用户1558882
2018/10/10
3.3K0
【“别跟我不会”系列】Java设计模式之原型模式
原型模式是用于创建重复对象,同时保证性能,一般应用场景是我们需要重复创建多个对象,例如在循环体中赋值一个对象。原型模式是用于创建重复对象,同时保证性能,一般应用场景是我们需要重复创建多个对象,例如在循环体中赋值一个对象。
23号杂货铺
2019/09/27
2340
python 字符串对齐和填充
text = 'Hello World' text.ljust(20) 'Hello World ' text.rjust(20) ' Hello World' text.center(20) ' Hello World ' text.rjust(20,'=') '=========Hello World' text.center(20,'*') '****Hello World*****' 或者format
用户5760343
2019/09/25
9120
说说Python 单引号、双引号、三引号的区别?
小猿会从最基础的面试题开始,每天一题。如果参考答案不够好,或者有错误的话,麻烦大家可以在留言区给出自己的意见和讨论,大家是要一起学习的 。
程序员小猿
2021/01/19
4.2K0
delphi字符串加引号_oracle 单引号
sp_qry.Close; sp_qry.SQL.Clear; sp_qry.SQL.Add(‘select * from item_info where item_clsno=’+quotedstr(sp_lb.KeyValue)); sp_qry.Open;
全栈程序员站长
2022/11/10
1.4K0
JAVA设计模式6:代理模式,用于控制对目标对象的访问
在代理模式中,代理对象充当了目标对象的中间层,客户端通过代理对象与目标对象进行交互。
Designer 小郑
2023/09/13
3110
JAVA设计模式6:代理模式,用于控制对目标对象的访问
设计模式就该这么学
设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。
星尘的一个朋友
2020/11/25
8210
Python设计模式-状态模式
切换状态的时候会使用self.__class__将它动态切换到状态对应的对象,这个稍后再看。
zx钟
2019/07/18
7410
点击加载更多

相似问题

Emacs python模式文件模式规范错误

11

Emacs python模式

612

EMACS-Python-模式-加载错误

20

用于Markdown和Python的Emacs多模式

12

Emacs perl模式中的遗传引号

21
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文