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

也许您可以使用Jquery UI Autocomplete。

您需要一个可用的文件名列表，因此可能需要先设置一个ajax调用才能执行此操作。

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

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

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

Answer 2

我认为，不应像@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">

类似的文件名ajax

2 个答案: