搜索/过滤数组

Question

I have a question. On my site (Concrete 5 based) I have a block to display a list of icons. I have this array. (The array has many more icons than what I've shown, this is just for an example.)

    <?php  $options = array(
    'icon-adjust' => 'Icon Adjust',
    'icon-adjustments' => 'Icon Adjustments',
    'icon-adn' => 'Icon Adn',
    'icon-alarmclock' => 'Icon Alarmclock',
    'icon-align-center' => 'Icon Align-center',
    'icon-align-justify' => 'Icon Align-justify',
    'icon-align-left' => 'Icon Align-left',
    'icon-align-right' => 'Icon Align-right',
    'icon-ambulance' => 'Icon Ambulance',
    'icon-anchor' => 'Icon Anchor',
    'icon-anchor2' => 'Icon Anchor2',
);
?>

I want to modify my search box so a user can type in something to filter out results from in the array. (Example: if they search for anchor, they'd see the two icon-anchor fields).

Can anyone help me out with how to go about this?

Here is my code for future reference:

    <script>
$('input[name=fromPages]').select2({
    placeholder: "<?=t('Search for a Page')?>",
    minimumInputLength: 1,
    width: '100%',
    multiple: true,
    ajax: {
        url: "<?=$view->action('load_pages')?>",
        dataType: 'json',
        quietMillis: 250,
        data: function (term, page) {
            return {
                q: term
            };
        },
        results: function (data, page) { // parse the results into the format expected by Select2.
            var results = [];
            $.each(data, function(i, concretePage) {
                results.push({'id': concretePage.id, 'text': concretePage.name});
            });
            return {
                results: results
            };
        },
        cache: true
    }
});
</script>

And for the select box:

<div class="form-group">
    <?php echo $form->label('fromPages', 'Search for an Icon')?>
    <div>
        <?php echo $form->hidden('fromPages'); ?>
    </div>
</div>

and a picture: (the top search box would filter results from the opened list) http://i.imgur.com/Ksrb7iQ.png?1

Answer 1

Check out typeahead.js library, you're not going to be able to accomplish this with just php

https://twitter.github.io/typeahead.js/