使用jQuery

时间：2017-06-20 10:55:17

标签： jquery html

我正在尝试使用jQuery构建搜索过滤器。当用户在文本框中键入文本时，我能够搜索单词并显示特定内容。

但我希望在点击“搜索”按钮后开始搜索。

这是JSFiddle

中的代码

＆＃13;
＆＃13; 
(function($) {
  jQuery.expr[':'].Contains = function(a, i, m) {
    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
  };

  function listFilter(header, list) {
    $(list).find('p').hide();
    var form = $("<form>").attr({
        "class": "filterform",
        "action": "#"
      }),
      input = $("<input>").attr({
        "class": "filterinput",
        "type": "text"
      }),
      search = $("<input>").attr({
        "class": "filterbutton",
        "type": "button",
        "name": "btn1",
        "value": "Search"
      });

    $(form).append(input).appendTo(header);

    $(input).on('input', function() {
      var filter = $(this).val();

      $(list).find('p').hide();

      if (filter) {
        $(list).find("p:Contains(" + filter + ")").show();
      }
    });
  }

  $(document).ready(function() {
    listFilter($("#header"), $("#list"));
  });
}(jQuery));
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<h1 id="header">Collection</h1>
<div id="list">

  <div id='p1'>
    <p>First Paragraph</p>
    <p>Abbot and Costello - Africa Screams</p>
  </div>

  <div id='p2'>
    <p>Second Paragraph</p>
    <p>Abbot and Costello - Frank/Meet</p>
  </div>

  <div id='p3'>
    <p>Third Paragraph</p>
    <p>addin</p>
  </div>

  <div id='p4'>
    <p>Forth Paragraph</p>
    <p>Begins</p>
  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

我怎样才能做到这一点？

提前致谢。

5 个答案:

答案 0 :(得分：1)

您需要附加搜索按钮并在点击事件上调用过滤器。

$("<input>").attr({"class":"filterbutton","type":"button","name":"btn1","value":"Search"});

    $(form).append(input).appendTo(header);
    $(form).append(search).appendTo(header);

    $(search).on('click', function () {
      var filter = $(input).val();

      $(list).find('p').hide();

      if(filter) {
        $(list).find("p:Contains("+filter+")").show();
      }
    });
  }

  $(document).ready(function () {
    listFilter($("#header"), $("#list"));
  });
}(jQuery));

答案 1 :(得分：1)

解决，添加按钮，听取点击!!

＆＃13;
＆＃13; 
(function($) {
  jQuery.expr[':'].Contains = function(a, i, m) {
    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
  };

  function listFilter(header, list) {
    $(list).find('p').hide();
    var form = $("<form>").attr({
        "class": "filterform",
        "action": "#"
      }),
      input = $("<input>").attr({
        "class": "filterinput",
        "type": "text"
      }),
      search = $("<input>").attr({
        "class": "filterbutton",
        "type": "button",
        "name": "btn1",
        "value": "Search"
      });

    $(form).append(input).append(search).appendTo(header);

    $(document).on('click', '.filterbutton', function() {
      var filter = $('.filterinput').val();

      $(list).find('p').hide();

      if (filter) {
        $(list).find("p:Contains(" + filter + ")").show();
      }
    });
  }

  $(document).ready(function() {
    listFilter($("#header"), $("#list"));
  });
}(jQuery));
＆＃13; 
<title>Some Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <h1 id="header">Collection</h1>
  <div id="list">

    <div id='p1'>
      <p>First Paragraph</p>
      <p>Abbot and Costello - Africa Screams</p>
    </div>

    <div id='p2'>
      <p>Second Paragraph</p>
      <p>Abbot and Costello - Frank/Meet</p>
    </div>

    <div id='p3'>
      <p>Third Paragraph</p>
      <p>addin</p>
    </div>

    <div id='p4'>
      <p>Forth Paragraph</p>
      <p>Begins</p>
    </div>

  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

使用：

而不是触发Jun 20, 2017 4:11:55 PM java.util.prefs.WindowsPreferences openKey WARNING: Could not open windows registry node Software\JavaSoft\Prefs at root 0x80000002. Windows RegOpenKey(...) returned error code 2. Jun 20, 2017 4:11:55 PM java.util.prefs.WindowsPreferences closeKey WARNING: Could not close windows registry node Software\JavaSoft\Prefs at root 0x80000002. Windows RegCloseKey(...) returned error code 6. **ERROR (91): RPC call failed; localhost:3389 Connection reset** at com.bmc.arsys.apitransport.ApiProxyJRpcBase.convertException(ApiProxyJRpcBase.java:643) at com.bmc.arsys.api.ProxyJRpc.getRpcClient(ProxyJRpc.java:135) at com.bmc.arsys.api.ProxyJRpc.<init>(ProxyJRpc.java:67) at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method) at sun.reflect.NativeConstructorAccessorImpl.newInstance(Unknown Source) at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(Unknown Source) at java.lang.reflect.Constructor.newInstance(Unknown Source) at com.bmc.arsys.apitransport.connection.ApiProxyFactory.createProxyInstance(ApiProxyFactory.java:89) at com.bmc.arsys.apitransport.connection.ApiProxyFactory.createProxy(ApiProxyFactory.java:160) at com.bmc.arsys.api.ProxyManager.createProxy(ProxyManager.java:602) at com.bmc.arsys.api.ProxyPool.createProxy(ProxyPool.java:106) at com.bmc.arsys.apitransport.connection.ApiProxyPool.get(ApiProxyPool.java:192) at com.bmc.arsys.apitransport.connection.ApiProxyManager.getProxy(ApiProxyManager.java:210) at com.bmc.arsys.api.PoolingProxyManager.getProxy(PoolingProxyManager.java:93) at com.bmc.arsys.apitransport.connection.ApiProxyManager.getProxy(ApiProxyManager.java:164) at com.bmc.arsys.api.ARServerUser.verifyUser(ARServerUser.java:1085) at com.bmc.arsys.api.ARServerUser.login(ARServerUser.java:412) at Remedi.RemedyCreateTicket.main(RemedyCreateTicket.java:46) 的输入事件 
<input type="text />

使用以下方法点击按钮触发：

$(input).on('input', function() {

然后改变这个：

$(search).on('click', function() {

到此：

var filter = $(this).val()

以便正确读取用户输入的文本。

答案 3 :(得分：0)

不确定我是否理解这个问题，但会将func saveToDB() { if #available(iOS 10, *) { Info = NSEntityDescription.insertNewObject(forEntityName: "Sinfo", into: appDelegate.persistentContainer.viewContext) as! Sinfo } else { Info = NSEntityDescription.insertNewObject(forEntityName: "Sinfo", into: appDelegate.managedObjectContext!) as! Sinfo } info?.title = Comman.shared.title info?.desc = Comman.shared.desc info?.id = String(Utility.shared.currentTimeStamp()) info?.cordinates = Comman.shared.cordinates?.joined(separator: ",") let ocation = Comman.shared.location info?.city = location?.city info?.state = location?.state info?.country = location?.country info?.state = location?.state info?.zip = location?.pincode info?.isuploaded = false appDelegate.saveContext() } 更改为$(input).on('input'让您更近一点？而不是获得$(search´).on('click;然后，您必须使用$(this).val()来获取正确的值才能从

中搜索

答案 4 :(得分：0)

解决了您的问题请检查此代码，它可以帮助您根据自己的问题更好地重新编码您的jsfiddle代码 

jQuery(document).ready(function() {
   jQuery(".responsive-menu > .menu-item").click(function(event){
   if (event.target !== this)
   return;
   jQuery(this).find(".sub-menu:first").slideToggle(function() {
   jQuery(this).parent().toggleClass("show");
  });
 });
});
相关问题
最新问题