- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
使用诸如watermark.js之类的插件在Jquery数据表的搜索字段中添加灰色提示文本不是一个选项,我必须自定义编写它。我快到了,但面临着这个小而奇怪的问题,下面的代码片段解释了这一点。
function toggleHintText()
{
// alert("The hint text should show up");
var textSuggest = "Please input search parameter";
var searchField = $('input:text');
searchField .attr("value", textSuggest );
searchField .addClass("activeHint");
searchField .focus(function() {
if(searchField .attr("value") == textSuggest)
{
searchField .attr("value", "");
}
});
searchField .keyup(function() {
if(searchField .attr("value") == "")
{
searchField .addClass("activeHint");
}
else
{
searchField .removeClass("activeHint");
}
});
searchField .blur(function() {
if(searchField .attr("value") == "")
{
searchField .attr("value", hinttext);
searchField .addClass("activeHint");
}
});
该方法称为onload,如下
$(document).ready(function() {
populateTableData();
toggleHintText();
} );
================================================== =============================================
我面临的问题是,如果没有方法开头的警报,提示文本不会显示在搜索框中。警报是否有利于 document.ready ?从 document.ready 调用两个方法是否会扰乱toggleHint 方法?我的要求之一是,如果用户在搜索查询后单击表格行,然后单击自定义后退按钮,则保留用户输入的搜索文本,这就是为什么我必须从 document.ready 调用它。
请提前告知并致谢。
最佳答案
尝试利用 .queue()
、 .delay()
、 .keyup()
$(document).ready(function() {
var data = $("#example");
data.DataTable();
$("input[type=search]")
.on("keyup", {
// if input , delay until no input for 1.2 seconds
"delay": 1200
}, function(e) {
var elem = $(this);
var update = function update() {
// wait 1.2 seconds to update `val` with "hint"
if ($.now() - e.timeStamp > e.data.delay
&& e.target.value.length > 0 && !/^\s/.test(e.target.value)) {
var val = e.target.value.toLowerCase();
// filter `.DataTable().data()`
// return items where first index matches `val`
var res = $.grep(data.DataTable().data(), function(value, key) {
return val === value[0].slice(0, val.length).toLowerCase()
|| new RegExp(val, "i").test(value[0])
})
// sort returned data
.sort()
// filter returned data `res` for match to `val`
.filter(function(hint) {
return hint[0].toLowerCase().slice(0, val.length) === val
|| new RegExp(val, "i").test(hint)
})[0];
elem.val(res[0])
.css({
"color": "grey",
"fontStyle": "italic"
});
} else {
return elem.queue("update", update)
}
};
var defer = function defer(next) {
// if input before 1.2 seconds ,
// empty `"update"` queue , delay calling
// update until no input for 1.2 seconds
elem.queue("update", [])
elem.delay(e.data.delay, "update")
.queue("update").push(update);
return next()
};
// if input, do stuff
if (e.target.value.length > 0) {
elem
.queue("update", defer)
.dequeue("update")
} else {
elem
.queue("update", [])
}
}).keyup()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<link href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
jsfiddle http://jsfiddle.net/o98cpxmf/2/
关于jquery - 在 Jquery 数据表搜索框中添加提示文本的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8380804/
我想为我们的网站创建一个自定义搜索框。让它工作如下: function bookssearch(bs) { window.open('http://webpac.kdu.edu.my/s
我需要向我的搜索系统添加一个弹出窗口事件 - 当客户仅输入 2 个字符时,它应该弹出一个带有警报 e 的小表格。 G。 “搜索时必须输入至少 3 个字符...”并且背景应变灰。 这对我来说可能吗?这是
我的以下功能存在格式问题。正如您将在下面看到的,它大部分都有效,只是搜索框的格式不是我想要的(我想复制 typeahead Twitter Bootstrap 功能): 用户可以在搜索框中输入书名,在
我正在尝试使用 php 和 jquery 实现一个搜索框(搜索结果来自数据库)。我想要做的是,当用户在搜索框中键入内容时,将进行查询以查找包含用户在搜索框中输入的关键字的数据。我遇到的问题是我有这样的
我想知道为什么当我在我的计算机上本地加载 Angular 搜索框时它不起作用。我使用的是相同的代码,当我使用 codepen、plunker 或 jsfiddle 等网站时,它确实有效。它无法正常工作
我想知道如何在鼠标悬停事件上将焦点设置到输入字段。 我想知道当鼠标悬停在输入字段或焦点字段上时如何加载输入字段或焦点字段,以便在光标触摸或鼠标悬停在搜索框的输入字段上时轻松准备打字。 最佳答案 您可以
我有index.jsp,我想搜索视频,但每当我搜索时,它都会给我带来不同的错误,并且我无法获得结果,就像它应该将用户带到搜索文本所在的页面一样。 Search.java import java.io.
所以搜索就像'Ozzie Smith' 第一个表有 (username, fname, lname) = osmith, ozzie, smith 第二张表有 (username, team) = o
有什么方法可以启动/打开带有代码的搜索框,或者只需单击搜索键即可? 最佳答案 SearchManager mgr = ((SearchManager) getSystemService(Context
废话不多说了,直接给大家贴关键代码了,具体代码如下所示: ? 1
我想制作一个具有自动建议并搜索 XML 文件中特定标签的搜索框。我怎样才能实现这一点? 最佳答案 这取决于您所说的 XML 文件的含义。 XML 文件在某些服务器上可用吗? 看看jQuery及其
我用javaee6和jsf2开发了一个小应用程序。我想要一个没有按钮的搜索字段(只需键入并按 Enter 键并给出结果)。我在 bean 中有一个搜索方法: public Book searchByT
首先,这个标题是我能想到的最好的标题。 我编写了一个非常短的小脚本来执行实时搜索。 它的基本原理是: (function ($) { $.fn.SearchThing = function (
我正在用 Java 创建一个简单的桌面应用程序,它显示当前正在运行的服务。我想在顶部添加一个谷歌搜索栏,可以直接在默认浏览器中打开应用中输入的关键字的谷歌搜索结果(网页)。 最佳答案 您应该从输入框中
美好的一天。我正在研究我的搜索框。我如何从多列中进行搜索。除了“id”列之外,我还有名字、姓氏、RFIDnum。我如何将它们添加到我当前的代码中。 这是我的代码: DataView dv = new
在 this site ,右上角的搜索框不起作用。 我尝试向父元素添加 z-index: .col-right-one-thirds { max-width: 22.38033333em;
我想要在 bootstrap 3+ 中带有选择选项和清除按钮的大搜索框。我尝试了下面的代码,但它没有正确对齐。
执行此代码$("input[name=q]").value = "Hello"; 应在 stackoverflow 搜索框中输入“Hello”。然而它仍然是空的。为什么? 最佳答案 因为它应该是: $
我是新手。我尝试制作一个搜索框。当我在 Firefox 上打开它时。对我来说没关系。然后我在 IE、Chrome 和 Safari 中执行此操作。实际上并不酷。有谁知道我的问题,请帮我解决一下? 我想
当用户加载我的页面时,浏览器中第一个激活的元素是我的菜单按钮之一。 我的页面上有一个搜索框(表单域),我希望它成为第一个激活的东西。 我所说的“事件”是指当用户按下选项卡按钮时,它会循环浏览网站上的所
我是一名优秀的程序员,十分优秀!