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で可能であることを知っていますが、それを完全に把握したことはありません。誰かが私にその方法を教えてくれて、私が5歳のようにそれを説明してもらえますか？

ボーナスポイント：「参加者」には2つの可能な値しかないため、ドロップダウンも追加し、テキストフィールドと同じように機能させます。

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 に答える