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

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

javascript jquery json

Javascript 使JQuery调用适用于所有JSON字段,javascript,jquery,json,Javascript,Jquery,Json,我用jQuery.grep（）搜索了一些JSON数据。基本上，我有一些搜索框，只想返回与框中输入内容匹配的JSON记录这里有一些代码： <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script type="text/javascript"> $(document).ready(func

我用jQuery.grep（）搜索了一些JSON数据。基本上，我有一些搜索框，只想返回与框中输入内容匹配的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>


$（文档）.ready（函数（）{
var事件=
[{
“id”：“1”，
“标题”：“测试事件”，
“开始”：“2012-08-08 18:45:00”，
“结束”：“2012-08-15 18:45:00”，
“参与者”：“是”，
‘注释’：‘一条名为杜登的小河从他们的地方流过，并为其提供必要的雷格里亚河。’，
},
{
“id”：“2”，
“标题”：“另一个测试事件”，
“开始”：“2012-08-24 16:37:00”，
“结束”：“2012-08-26 16:37:00”，
“参与者”：“是”，
“注：”“这是一个天堂般的国家，句子中烤过的部分会飞进你的嘴里。即使是全能的指点也无法控制盲文——这几乎是一种非正统的生活。”，
},
{
“id”：“3”，
“标题”：“无限事件”，
“开始”：“2012-08-09 22:44:00”，
“结束”：“2012-08-09 15:44:00”，
‘参与者’：‘否’，
‘注释’：‘在很远的地方，在“山脉”这个词后面，在远离伏卡里亚和辅音的国家，那里住着盲文。’，
}];     
$（'#output'）.html（JSON.stringify（events））；
$（'#title_search'）。更改（函数（）{
var事件=事件；
排序的_事件=$.grep（事件，函数（evt，i）{
返回evt.title.toLowerCase（）.indexOf（$（“#title_search”）.val（））>=0
});
$（'#output'）.html（JSON.stringify（sorted#u事件））；
});
});
标题：

注：

问：

如您所见，当#title_搜索更改时，它会将JSON中的所有“title”字段变灰，并仅返回匹配的字段。这一切都很好

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

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

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

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/>

我想这正是你所期望的，增加了对下拉选择的支持

看这张照片

Html

我刚刚意识到这种方法存在一些问题。如果将第二个条目的“参与者”更改为“否”，在标题中搜索“测试”，在“参与者”字段中搜索“是”，则会将其缩小到正确的记录范围。但是，如果您将select更改为“否”，它会返回最后两个，即使在“title”字段中仍在搜索“test”。它实际上没有逻辑和条目，它只是搜索最后一个条目。好的，修复了它。我的解决方案是将处理程序与上述函数解耦，并在change（）事件中迭代每个输入字段。也许这不是最有效的方法，但似乎有效。

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);

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>

$(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);
});