文件自动完成搜索框（图片）;怎么可能？

我想为用户提供一个自动完成的输入字段（带有结果中的图像），用于搜索装满GIF的“AAU01-010.gif”，“AAU01-020.gif”的文件夹/设备。文件自动完成搜索框（图片）;怎么可能？

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

P.S.我从另一个例子在线底层代码，仍然需要将其更改为我的需求 $（函数（）{

$("#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>

来源

2013-10-09 Firebirdz

应该可能，但您需要有一个服务器端脚本作为您的源返回服务器上的文件数组。 – putvande

你需要有一个服务器端脚本和更新现有的JavaScript处理来自使用AJAX控制器例如JSON回应。我会更新这个答案有一个基本的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)); 

?>

以上是你可以用它来获得结果的一个例子。

来源

2013-10-09 13:34:21 Chris

非常感谢！ – Firebirdz

然而，我对AJAX/JSON感到厌倦，不知道如何将它与我的输入框结合起来，只是多了一些提示/代码将受到高度赞赏。 – Firebirdz

我不确定是否应该让php脚本执行搜索，或者让自动完成功能执行此操作，因为我也可以仅使用php请求文件列表，然后让自动完成对它执行搜索。有大约2300个文件，所以我不知道什么是最好的性能明智？ – Firebirdz

文件自动完成搜索框（图片）;怎么可能？

回答

相关问题