文件自動完成搜索框（圖片）;怎麼可能？

我想爲用戶提供一個自動完成的輸入字段（帶有結果中的圖像），用於搜索裝滿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

文件自動完成搜索框（圖片）;怎麼可能？

回答

相關問題