Question

我想为用户提供一个自动完成输入字段（结果中包含图片），用于搜索文件夹/设备，其中包含GIF＆＃34; AAU01-010.gif＆＃34;，＆＃34; AAU01-020.gif＆＃34;

我希望他们能够搜索文件的名称。 由于我无法在互联网上找到任何东西，这是否可能，如果是这样，怎么办？！

P.S。我从网上的另一个例子中获取了底层代码，仍需要根据我的需要进行更改 $（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>

Answer 1

您需要拥有服务器端脚本并更新现有的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示例。

自动填充文件（图像）的搜索框;是可能的，怎么样？

1 个答案: