Question

我有一些JSON数据，我正在使用jQuery.grep（）进行搜索。基本上，我有一些搜索框，并且只想返回与框中输入内容匹配的JSON记录。

在这里，有一些代码：

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">     

     $(document).ready(function(){
         var events =  
         [{
            'id': '1',
            'title': 'Test event',
            'start': '2012-08-08 18:45:00',
            'end': '2012-08-15 18:45:00',
            'participant': 'yes',
            'notes': 'A small river named Duden flows by their place and supplies it with the necessary regelialia.',
        },
        {
            'id': '2',
            'title': 'Another test event',
            'start': '2012-08-24 16:37:00',
            'end': '2012-08-26 16:37:00',
            'participant': 'yes',
            'notes': 'It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life.',
        },
        {
            'id': '3',
            'title': 'infinity event',
            'start': '2012-08-09 22:44:00',
            'end': '2012-08-09 15:44:00',
            'participant': 'no',
            'notes': 'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.',
        }];     

        $('#output').html(JSON.stringify(events));

        $('#title_search').change(function() {
                var sorted_events = events;
                sorted_events = $.grep(events, function(evt,i){
                    return evt.title.toLowerCase().indexOf($('#title_search').val()) >= 0
            });
            $('#output').html(JSON.stringify(sorted_events));
        });
     });
    </script>
</head>
<body>
Title: <input type='text' id='title_search'></input><br/>
Notes: <input type='text' id='notes_search'></input><br/>
    Q: <input type='text' id='q_search'></input><br/>
<div id="output">
</div>
</body>

正如您所看到的，当#title_search发生更改时，它会抓取JSON中的所有“标题”字段，并仅返回匹配的字段。这一切都很好。

现在，我想对'Notes'字段（以及本示例中不存在的其他文本字段）执行相同操作，但是反复编写相同的函数似乎效率低下（并且只是完全错误）每个搜索字段。这就是我的JavaScript技能崩溃的地方。我知道这在JavaScript / jQuery中是可行的，但是从来没有完全掌握它。有人能告诉我怎么做，并向我解释，就像我五岁一样吗？

奖励积分：我还想添加一个下拉列表，因为“参与者”只有两个可能的值，并且它的工作方式与文本字段相同。

Answer 1

您可以使用表单元素名称属性：

Title: <input name="title" type='text' id='title_search'></input><br/>
Notes: <input name="notes" type='text' id='notes_search'></input><br/>
    Q: <input name="q" type='text' id='q_search'></input><br/>

然后在您的JavaScript中引用名称以将其与字段匹配：

function changeHandler(e) {
    var sorted_events = events,
        $this = $(this), // save a reference to the event target
        field = $this.attr("name"),
        value = $this.val();

    sorted_events = $.grep(events, function(evt,i){
        return evt.title.toLowerCase().indexOf($value) >= 0
    });

    $('#output').html(JSON.stringify(sorted_events));
}

$('#title_search').change(changeHandler);
$('#notes_search').change(changeHandler);
$('#q_search').change(changeHandler);

Answer 2

我认为这是你真正期待的，也增加了对下拉选择的支持

查看fiddle demo

HTML

Title: <input type='text' id='title'></input><br/>
Notes: <input type='text' id='notes'></input><br/>
    Q: <input type='text' id='q'></input><br/>
participant : <select id='participant'>
<option selected='selected'>Select</option>
<option>Yes</option>
<option>No</option>
</select>
<div id="output">
</div>

的Javascript

$(document).ready(function() {
    var events = [{
        'id': '1',
        'title': 'Test event',
        'start': '2012-08-08 18:45:00',
        'end': '2012-08-15 18:45:00',
        'participant': 'yes',
        'notes': 'A small river named Duden flows by their place and supplies it with the necessary regelialia.',
        },
    {
        'id': '2',
        'title': 'Another test event',
        'start': '2012-08-24 16:37:00',
        'end': '2012-08-26 16:37:00',
        'participant': 'yes',
        'notes': 'It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life.',
        },
    {
        'id': '3',
        'title': 'infinity event',
        'start': '2012-08-09 22:44:00',
        'end': '2012-08-09 15:44:00',
        'participant': 'no',
        'notes': 'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.',
        }];

    $('#output').html(JSON.stringify(events));

    var changeHandler = function() {
        var sorted_events = events;
        var field = $(this).attr('id');
        var value = $(this).val();
        sorted_events = $.grep(events, function(evt, i) {            
            return evt[field].toLowerCase().indexOf(value.toLowerCase()) >= 0
        });
        $('#output').html(JSON.stringify(sorted_events));
    };

    $(document).on('change', '#title', changeHandler);
    $(document).on('change', '#notes', changeHandler);
    $(document).on('change', '#q', changeHandler);
    $(document).on('change', '#participant', changeHandler);
});

使JQuery调用适用于所有JSON字段

2 个答案: