类似的文件名ajax

similar file name ajax

本文关键字：ajax 文件名      更新时间：2023-09-26

我创建了一个文本输入字段，用于检查服务器上的文件名。但如果你想这样做，你必须把文件名写出来。因此，我需要一个解决方案，即使输入的文本不完全相同，也能显示文件。

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();
        }
    });
});

顺便说一句，当然，对我的剧本的任何改进都是受欢迎的。

也许您可以使用Jquery UI自动完成。

您需要一个可用文件名的列表，所以可以先设置一个ajax调用来完成此操作。

然后，当用户在搜索字段中键入时，它将显示与您使用第一个Ajax调用构建的列表相匹配的类似结果。

当用户选择一个建议的结果时，您将获得确切的文件名，以便将文件名直接传递给您现在已经拥有的ajax调用。

似乎@Kaiido刚刚用不同的库回答了一个类似的解决方案。

我认为，与其像@Quentin建议的那样在每个change keyup paste上调用服务器，不如首先调用以获取可下载的每个文件的列表，将它们存储在数组中，并使用最接近的字符串匹配库，如Dave Porter的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">

相关文章：