8

使用诸如 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 调用它。

请提前告知和感谢。

4

2 回答 2

4

尝试利用.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/

于 2015-05-16T21:38:13.557 回答
3

«警报是否有利于 document.ready？»

当然。但不赞成 document.ready 而是赞成“动态加载的表 data.ready”。

请参阅您的第二个代码段：

  • 首先，您调用 populateTableData()：我想通过 Ajax 请求从可能的远程服务器异步读取数据。

  • 然后，您调用 toggleHintText() 在表格行上实现切换效果，我发现在 populateTableData() 内部实现的一些回调将在 Ajax 请求（或类似的异步操作）完成后立即附加。

Javascript 是单威胁的（这意味着您的代码在单个线程中执行，因此没有任何并发​​性），但并非完全没有并发性，因为异步操作由其他正在工作或等待必要操作的并发线程参与完成，然后（触发完成事件）在 javascript 主任务循环中推送一个任务（附加到该元素的事件处理程序）。

alert() 调用会停止 javascript 主循环的执行，但不会停止参与异步任务的并发线程。

这样，它就可以成功完成 Ajax 请求操作（即使没有因为“警报暂停”而导致服务器超时失败）并触发完成事件。

...但是在 javascript 任务循环继续之前，不会执行附加到该事件的回调。

在填充表数据之前，您的 toggleHintText() 函数被调用 SURE，如果没有 alert()，其其余代码将不会在该表中找到任何元素（或者至少不会找到由 populateTableData() 填充的任何新元素）。

因此，如果没有 alert()，您的代码将无法工作，这是有原因的。

但我不确定为什么即使有警报它也能正常工作。我发现您的浏览器可以将警报停止实现为某种“暂停的 nextTick()”并尽快执行，至少是挂起的事件处理程序（但我认为这在 javascript 规范中并不完全正确）。

为避免此问题，当您确定数据已填充到表中时，需要调用 toggleHintText() 。那是：

  • 从填充（假定的）Ajax 请求完成数据的事件处理程序调用它。

  • 在那一刻触发您自己的元素并将 toggleHint() 附加为它的事件处理程序。

或者，您可以修改您的 toggleHintText() 事件处理程序以附加到表本身（或整个文档），而不是稍后动态加载的元素，然后检查事件目标。

这就是过时的 .live() jquery 方法所做的，现在可以简单地使用 .on() 和目标选择器来实现。例如：

在您的代码中：

var searchField = $('input:text');
...
searchField.focus(function() {...});

...最后一行相当于：

searchField.on("focus", function(){});

您可以将其（例如）替换为：

$("body").on("focus", 'input:text', function(){...});

这样，事件处理程序直接附加到文档的主体和每个焦点事件，它将检查目标是否匹配给定的选择器（无论元素是否在事件处理程序附加之前创建）。

总之：您不能将事件处理程序附加到尚不存在的元素。

另一方面，你有一些元素操作，比如添加类和属性。您不能在元素创建之前执行此操作，但类似地，您可以将事件处理程序附加到其“创建”事件。

但是，不幸的是，这个事件实际上并不存在。但是有一些技术可以通过 dom 更改事件来实现它。请参阅有关 liveQuery 插件的这个问题。

于 2015-05-21T06:01:58.807 回答