0

I want to give the user an autocomplete inputfield (with image in result) which searches a folder, /devices, filled with GIF's "AAU01-010.gif", "AAU01-020.gif".

I want them to be able to search on the name of the files. Since i couldn't find anything on the internet, is this possible, if so, how?!

P.S. I took underlying code from another example online, still need to change it to my needs $(function() {

    $("#my_ac").autocomplete({
        source: [
            {
                value: "Tom Hanks",
                label: "Tom Hanks",
                description: "Actor",
                image: "hanks.png"
            },
            {
                value: "Termionator 2",
                label: "Termionator 2",
                description: "Movie",
                image: "terminator.png"
            }
        ],
        minLength: 1
    }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + item.image + '"></div><div class="label">' + item.label + '</div><div class="description">' + item.description + '</div></div></a>';
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append(inner_html)
            .appendTo( ul );
    };
});

HTML

<h3>Ref_Devices</h3>
      <div style="height:300px;">
      <input type="text" id="my_ac"/>
      <div class="list_item_container">
    <div class="image"><img src=""></div>
    <div class="label"></div>
    <div class="description"></div>
    </div>
4

1 回答 1

0

您将需要一个服务器端脚本并更新您现有的 JavaScript 以处理来自控制器的 JSON 响应，例如使用 AJAX。我将使用基本的 PHP 脚本更新此答案。

<?php

    $sQuery = $_GET['search']; # string to search
    $aResults = array(); # empty results array

    # loop through directory containing images
    if($handle = opendir('./images')) {
        while(false !== ($sFileName = readdir($handle))) {

            # blacklist particular names to exclude from search
            if(in_array($sFileName,array('.','..'))) continue;

            # if we find a result, add it to the array of results
            if(stristr($sFileName,$sQuery)) $aResults[] = $sFileName;
        }
    }

    # return jSON encoded array
    exit(json_encode($aResults));

?>

以上是您可以用来获取结果的 PHP 示例。

于 2013-10-09T13:34:21.877 回答