在Jquery数据表搜索框中添加提示文本的问题

时间：2011-12-05 03:51:54

标签： jquery text datatable hint

使用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调用它的原因。

请提前通知并表示感谢。

2 个答案:

答案 0 :(得分：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/

答案 1 :(得分：3)

«警报是否有利于document.ready的工作？

不确定。但不赞成document.ready，而是支持“dinamically loaded table data.ready”。

请参阅第二个代码段：

  • 首先调用populateTableData（）：我想通过Ajax请求异步从远程服务器读取数据。

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

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 change事件实现它。请参阅有关liveQuery插件的this question。

相关问题
最新问题