jQuery如何根据输入到文本框的关键字查询页面内容、然后把相关的内容全部显示到list中、

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery如何根据输入到文本框的关键字查询页面内容、然后把相关的内容全部显示到list中、相关的知识,希望对你有一定的参考价值。

点击list中的内容可以直接跳转到页面的相关位置
文本框输入Emma、进行查询、然后把文中查询到Emma全部同时添加显示在右边的list中(例:所有的红色Emma)点击list中所添加的Emma、分别跳转到不同的位置

给你个思路:
搜索方法里用正则表达式找到匹配字符串的位置然后加入一个红色的节点<font name='reg0' color='red'>匹配的文字</font>(name是你动态产生的),并添加一个超链接到右边的list中,超链接中的href='#reg0'就可以了~
参考技术A 问题有点乱不大明白你的意思~
最好要有实际的例子~!
参考技术B 你说的应该是类似百度一样的搜索吧,输入内容有一个下拉框,然后显示内容,点击即可跳转?? 参考技术C 请问你实现了吗?能发一个例子到我邮箱里吗?

如何在不刷新页面的情况下将文本从段落元素复制到输入值?

【中文标题】如何在不刷新页面的情况下将文本从段落元素复制到输入值?【英文标题】:How do I copy text from a paragraph element to an input's value without refreshing the page? 【发布时间】:2018-12-31 10:08:23 【问题描述】:

我正在尝试将&lt;p&gt; 元素内的文本复制到&lt;input&gt; 元素的value 属性中。

段落文本包含.30, .31, .6, .38,而这段文本是通过jQuery脚本更新的,没有刷新页面,所以我每次都需要用段落的新内容更新&lt;input&gt;value属性:

<p id="filter-display">.30, .31, .6, .38</p>

更新后的输入应如下所示:

<input type="hidden" name="tags" value=".30, .31, .6, .38"> 

有什么方法可以在每次更改时更新输入的 value 属性以反映段落的文本?

【问题讨论】:

您的标签汤让您无法理解您要做什么?这个客户端javascript需要使用jquery修改DOM吗?还是需要生成不同的 HTML 输出的服务器端 javaphp?而ajax和它有什么关系? #filter-display 中的 id 是由 jquery 生成的,我需要在同一时间将相同的 id 放入隐藏输入中 如果我们能看到更新p 标记的逻辑将会有所帮助。还有你说的“不充电”,你指的是什么? 如果是jQuery生成的,你想让jQuery生成隐藏的输入元素,那你为什么要标记javaphp和@ 987654336@?他们似乎与您的问题没有任何关系。 【参考方案1】:

假设你想在不刷新页面的情况下使用AJAX来完成这些更新,以便修改#filter-display的文本内容,那么每当段落的TextNode更新时,你可以使用jQuery val() function更改隐藏输入的 value 属性,并将适当的侦听器(参见 this question)应用于 TextNode 或段落:

var $filter_display = $("#filter-display");

$filter_display[0].firstChild.addEventListener("DOMCharacterDataModified", function() 
    $("#my-hidden-input").val($filter_display.text());
);

纯 JavaScript:

var filter_display_text = document.getElementById("filter-display").firstChild;

filter_display_text.addEventListener("DOMCharacterDataModified", function() 
     document.getElementById("my-hidden-input").value = filter_display_text;
);

遗憾的是,jQuery 还没有一种方便的方法来获取元素的实际 TextNode,text() 返回给定元素中所有嵌套 TextNode 的实际值。

【讨论】:

以上是关于jQuery如何根据输入到文本框的关键字查询页面内容、然后把相关的内容全部显示到list中、的主要内容,如果未能解决你的问题,请参考以下文章

如何用Jquery获取到文本框的值然后局部刷新

jquery如何实现点击按钮文本替换成输入框的内容?

使用 JQuery 控制文本框的范围

用JS怎样获取文本框的值

微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo

如何通过使用 jQuery 拖动其右下角来调整文本输入框的大小(如 textarea)?