0

我有一些我正在使用 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>

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

现在，我想对“备注”字段（以及本示例中没有的其他文本字段）执行相同的操作，但是为每个搜索字段一遍又一遍地编写相同的函数似乎效率低下（而且完全是错误的） . 这就是我的 JavaScript 技能崩溃的地方。我知道这在 JavaScript/jQuery 中是可能的，但从来没有完全掌握它。有人可以告诉我如何，并像我五岁一样向我解释吗？

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

4

2 回答 2

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);
于 2012-08-10T23:15:32.093 回答
1

我认为这是您真正期望的，还增加了对下拉选择的支持

看小提琴演示

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);
});​
于 2012-08-11T04:33:53.400 回答