похожее имя файла ajax

Question

Я создал поле ввода текста, которое проверяет имена файлов на моем сервере. Но если вы хотите сделать это, вы должны обязательно указать имя файла. Поэтому мне нужно решение, которое отображает мне файл, даже несмотря на то, что входной текст не является точно таким же.

HTML:

<form method="GET"> 
    <img src="search.png" height="28" alt="search" title="" /> 
    <input name="search-item" type="text" placeholder="Suchen..." autocomplete="off" /> 
</form> 
<div id="search_suggest"> 
</div> 

JQuery/Ajax:

$('input[name=search-item]').on('change keyup paste', function() { 
    if($('input[name=search-item]').val() === ""){ 
     $('#search_suggest').hide(); 
    } 
    var input_movie = 'video/' + $('input[name=search-item]').val() + '.avi'; 
    var input_thumbnail = 'video/Thumbnail/' + $('input[name=search-item]').val() + '.png'; 
    $.ajax({ 
     url: input_movie, 
     type: 'GET', 
     success: function() { 
      $('#search_suggest').show(); 
      $('#search_suggest').html('<a href="' + input_movie + '"><div class="searchedFile"><img src="' + input_thumbnail + '" height="35" /><span>DeadFighters</span></div></a>'); 
     }, 
     error: function() { 
      $('#search_suggest').hide(); 
     } 
    }); 
}); 

И кстати, конечно любое улучшение на мой сценарий приветствуется.

Answer 1

Я думаю, что вместо того, чтобы звонить на ваш сервер на каждый change keyup paste, как предлагал @Quentin, вы должны сделать первый звонок, чтобы получить список всех загружаемых файлов, сохранить их в массиве и использовать близкое соответствие строк библиотека как didyoumean.js Дэйв Портер, который, кажется, делает очень хорошо свою работу

var list_files=['fuzzy','duzzy','file', 'names']; 
 
document.querySelector('input').addEventListener('keyup', function(){res.innerHTML=didYouMean(this.value, list_files)});

<script src="https://raw.githubusercontent.com/dcporter/didyoumean.js/master/didYouMean-1.2.1.js"></script> 
 
<div id="res"></div> 
 
<input type="text">

Answer 2

может быть, вы можете использовать Jquery UI Autocomplete.

Вам понадобится список доступных имен файлов, поэтому, возможно, настройте вызов ajax, чтобы сделать это первым.

Затем, когда пользователь вводит в поле поиска, он будет показывать похожие результаты, сопоставляемые с списком, который вы создали с помощью первого вызова Ajax.

Когда пользователь выбирает предлагаемый результат, у вас будет точное имя файла, чтобы передать имя файла непосредственно на вызов ajax, который у вас уже есть.

Кажется, что @Kaiido просто ответил на аналогичное решение с другой библиотекой.