Question

我已经构建了一个搜索过滤器来搜索我的项目，但我只有5个过滤器。但是当我过滤日期时一切都很好，但是当我过滤姓名和日期时，我只得到日期的结果，而不是姓名和日期。

    $( "input[name='name']" ).on("change paste keyup", function() {

    var value = $(this).val();

    if(value.length > 0) {
        getEventsByName('name',$(this).val());          
    }else{
        $("#block-a-events").empty();
        getEvents();
    }


});

$( "input[name='date']" ).on("change paste keyup", function() {

    var value = $(this).val();
    var newDate = myDateFormatter(value);

    if(value.length > 0) {
        getEventsByName('date',newDate);            
    }else{
        $("#block-a-events").empty();
        getEvents();
    }


});

$( "#city" ).on("change", function() {

    var value = $(this).val();

    if(value.length > 0) {
        getEventsByName('location',value);          
    }else{
        $("#block-a-events").empty();
        getEvents();
    }


});

$( "#age" ).on("change", function() {

    var value = $(this).val();

    if(value.length > 0) {
        getEventsByName('age',value);           
    }else{
        $("#block-a-events").empty();
        getEvents();
    }


});

$( "input[name='genre']" ).on("change paste keyup", function() {

    var value = $(this).val();

    if(value.length > 0) {
        getEventsByName('genres',value);            
    }else{
        $("#block-a-events").empty();
        getEvents();
    }


});

上面你有过滤器选项，下面你看我如何过滤我的对象

function getObjects(obj, key, val) {
var objects = [];
for (var i in obj) {
    if (!obj.hasOwnProperty(i)) continue;
    if (typeof obj[i] === 'object') {
        objects = objects.concat(getObjects(obj[i], key, val));
    } else if (i.includes(key) && obj[key].includes(val)) {
        objects.push(obj);
    }
}
return objects;
}

这就是处理，下面你会看到如果一切正常它会怎么做。

    function getEventsByName(key, value)
{
    $.ajax({
        dataType: 'json',
        url: '{url}',
        success : function(data)
        {
            var events = JSON.stringify(data);
            var filter = getObjects(data, key, value);

            $("#block-a-events").empty();

            $.each($.uniqueSort(filter), function(i, item) {

                content += '{html}';
                $("#block-a-events").append(content);

            })
        }
    })      
}

非常感谢！

Answer 1

假设您的数据是有效的json，也许JMESPATH可以帮助您正确过滤数据。

它是一种json查询语言。

例如：您可以按年龄＆gt;过滤以下JSON; 20与：

people[?age > `20`].{name: name, age: age}

{
  "people": [
    {
      "age": 20,
      "other": "foo",
      "name": "Bob"
    },
    {
      "age": 25,
      "other": "bar",
      "name": "Fred"
    },
    {
      "age": 30,
      "other": "baz",
      "name": "George"
    }
  ]
}

结果如下：

[
  {
    "name": "Fred",
    "age": 25
  },
  {
    "name": "George",
    "age": 30
  }
]

您可以通过脚本标记将jmespath.js包含在HTML中，然后应用过滤器，从而轻松使用jmes：

let searchResult = jmespath.search([JSON], [your filter]);

有关详细信息，请参阅the examples。还有按日期说明的过滤器。

Answer 2

在每个活动中，您传递一个键=＆gt; val对你过滤功能，你过滤des不保持任何状态。所以每次只过滤一次key =＆gt; val pair。

最好是序列化所有输入并通过GET或POST请求将它们全部发送到服务器（后端）。然后过滤那里的所有东西（在后端）。并使用js显示过滤的json。

但是没有后端过滤器，为了在前端过滤多个输入，您可以使用多个选项。例如：

将文件管理器状态保存在对象中。例如

document.SomeGlobalDataPersistentObject = {};

function getEventsByName(key, value)
 {
 document.SomeGlobalDataPersistentObject[key] = val;

 $.ajax({
     dataType: 'json',
     url: '{url}',
     success : function(data)
     {
         var events = JSON.stringify(data);
         var filter = getObjects(data);
  ...
}
})
}



 function getObjects(obj) { 
 var objects = jQuery.extend(true, {}, obj);
 var tmpObjects = [];
 for (var i in obj) {
     if (!objects.hasOwnProperty(i)) continue;
     tmpObjects = [];
     for (key in document.SomeGlobalDataPersistentObject) {
         var val = document.SomeGlobalDataPersistentObject[key];
         if (typeof objects[i] === 'object') {
             tmpObjects = tmpObjects.concat(getObjects(tmpObjects[i]);
         } else if (i.includes(key) && objects[key].includes(val)) {
             tmpObjects.push(objects);
         }
     }
     objects = jQuery.extend(true, {}, tmpObjects);
     tmpObjects = []
 }
 return objects;
 }

或者您最好不是在事件监听器函数中序列化所有表单输入，而是在getObjects方法中的某些位置输入：

$( "input[name='name']" ).on("change paste keyup", function() {

if(value.length > 0) {
    getEventsByName('name',$(this).val());          
}else{
    $("#block-a-events").empty();
    getEvents();
}

});


 function getEvents()
 {
 $.ajax({
     dataType: 'json',
     url: '{url}',
     success : function(data)
     {
         var events = JSON.stringify(data);
         var filter = getObjects(data);
      ...
    }
})
}



function getObjects(obj, key, val) {
var objects = [];

var filter = {
    'name':$( "input[name='name']" ).val(),
    'date':$( "input[name='date']" ).val(),
    'city':$( "#city" ).val(),
    'age':$( "#age" ).val()
}

for (var i in obj) {
    if (!obj.hasOwnProperty(i)) continue;
    for (var key in filter) {
       ...
    }
}
return objects;
}

P.S。抱歉代码格式化

Answer 3

To do this you simply provide a text box that takes a search term. On the server you then check to see what filter it is and them search for an send back the relevant data using a query.

So for example i have a text box that says search. I enter a name or a city or place or thing into it. It then posts back to the server, there is for example a linq query that sees if there is a match for this entity that matches the search term. For example does the customers entity have a record that matches the name or the city or the place or the thing, if so then send it.

来自json的多个搜索项目

3 个答案: