Question

我在下面的链接中有代码，其中有一个下拉菜单和一个文本框。有一个javascript根据下拉列表中的选择选项显示表格。我正在尝试添加一个搜索框，以便当用户从下拉列表中选择时，他可以输入文本框并获取所需的信息。我应该从哪里开始以及如何链接我当前的javascript代码？谢谢！

https://fiddle.jshell.net/s5ftvgmx/3/

Answer 1

我为您的搜索创建了一个代码，您可以在https://fiddle.jshell.net/s5ftvgmx/14/

查看代码的实时演示

＆＃13;

var navigateAndFetchPages = function(data) {

  return Promise.all(data.map(function(val) {
    return Rq(val.esomar_url)
      .then(function(data) {
        var $ = cheerio.load(data),
          pages_elem = $('.mt0.mb0-5.pt0').find('a').not('.active');
          return {
            country_name: val.country_name,
            links: pages_elem
          };
      });
  }));

};

navigateAndFetchPages
.then(function(countryPages) {
  // do stuff with `countryPages`
})
.catch(function(err) {
  console.log(err);
});

＆＃13;

$(document).ready(function() {

function addRemoveClass(theRows) {

    theRows.removeClass("odd even");
    theRows.filter(":odd").addClass("odd");
    theRows.filter(":even").addClass("even");
}

 $(document).on('keyup','#myInput',function(){
 				var selected = $("#selectField").val();
        var search=$("#myInput").val();            
        search=search.toLowerCase();            
        $('tr[id!="HeadRow"]').hide();
        $('tr[id!="HeadRow"]').each(function(){            
            var obj=$(this);
            var productName=obj.first('td').html();
            productName=productName.toLowerCase();
            if(productName.search(search)>=0)
            {
                if(selected!= "All")
                {
                  if(obj.attr('position')==selected)
                  {
                  obj.show();
                  }
                }else{
                  obj.show();
                }
            }               
        });
    });

var rows = $("table#myTable tr:not(:first-child)");

addRemoveClass(rows);


$("#selectField").on("change", function() {

    var selected = this.value;

    if (selected != "All") {

        rows.filter("[position=" + selected + "]").show();
        rows.not("[position=" + selected + "]").hide();
        var visibleRows = rows.filter("[position=" + selected + "]");
        addRemoveClass(visibleRows);
    } else {

        rows.show();
        addRemoveClass(rows);

    }

});
});

＆＃13;

基于下拉菜单的JavaScript搜索

1 个答案: