始终显示自动完成列表，即使搜索不匹配

Posted 2023-05-08

【中文标题】始终显示自动完成列表，即使搜索不匹配

【英文标题】：Always show autocomplete list, even if search doesn't match

【发布时间】：2018-11-09 07:44:14

【问题描述】：

我有一个自动完成字段，在输入类型时我会转到 php/数据库以检索匹配选项。

问题是，我的建议列表与文本不完全匹配。我解释一下：

假设我输入“Jon”。我的列表将从数据库“John Doe”、“Jonatan”等中获取。只有“Jonatan”作为输入的建议可见，但我确实需要它们，因为它考虑了近似值（我的上有一个 soundex 元素后端搜索）。

我的 javascript/Ajax 代码：

function prePatientsList()
      //I'm limiting search so it only starts on the second character
    	if (document.getElementById("name").value.length >= 2)  

            try
            
            	listExecute.abort();
        	catch(err) 
        	   null;
        	
            var nome= $("#name").val();
            var nomeList = "";
            listExecute = $.ajax(
                    url: '/web/aconselhamento/Atendimento/PrePacientesAutocomplete',
                    type: "POST",
                    async: true,
                    datatype: 'json',
                    data:  nome: nome
             ).done(function(data)
            	 source = JSON.parse(data);
             );
            
            
            $(function() 
            	$("input#nome").autocomplete(
                    source: source,
                    // I know I probably don't need this, but I have a similar component which has an URL as value, so when I select an option, it redirects me, and I'll apply you kind answer on both.
                    select: function( event, ui )                     	
                        ui.item.label;
                    
                );
            );
    	     

    

谢谢。

【问题讨论】：

我唯一的建议是使用正则表达式。 developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/… 仍然需要做很多工作来分解字符串等。祝你好运:)

没有看到你的后端代码，很难确定，但我猜你需要研究更好的文本搜索实现。例如，如果没有 Levenshtein 距离或 n-gram 索引，您可能会发现很难找到相近的匹配。也许看看 Elasticsearch 或 Apache Solr？

我的后端已经给了我正确的 JSON。如果我键入 Jon，我的建议列表变量（在本例中为源）将获得正确的值（John Doe 等）。问题是：自动完成文本输入只会显示完全匹配的列表项目。我的列表与我的 soundex 匹配，所以我需要一直显示整个列表。

@ryuzakixd 请提供一个正在返回的 JSON 数据的示例。由于您是从返回的数据中本地过滤源，因此它非常基本。如果这个词是Jon，它不会命中John。您必须为此创建自己的算法。

【参考方案1】：

我认为您必须将远程端点直接设置为自动完成的源（例如，类似于https://jqueryui.com/autocomplete/#remote），以便它是执行所有过滤的后端。现在，自动完成功能实际上认为您已经为它提供了一个静态选项列表，应该从中进行进一步过滤，因此它决定自己处理过滤。

您的代码可以像我想的那样简单，无需在自动完成范围之外有单独的处理程序或 ajax 请求。

$(function() 
  $("input#nome").autocomplete(
    minLength: 2, //limit to only firing when 2 characters or more are typed
    source: function(request, response) 
    
      $.ajax(
        url: '/web/aconselhamento/Atendimento/PrePacientesAutocomplete',
        type: "POST",
        dataType: 'json',
        data:  nome: request.term  //request.term represents the value typed by the user, as detected by the autocomplete plugin
     ).done(function(data)
         response(data); //return the data to the autocomplete as the final list of suggestions
     );
    ,
    // I know I probably don't need this, but I have a similar component which has an URL as value, so when I select an option, it redirects me, and I'll apply you kind answer on both.
    select: function( event, ui )                      
      ui.item.label;
    
  );
);

请参阅http://api.jqueryui.com/autocomplete/#option-source 了解更多信息。

【讨论】：

非常感谢！我很抱歉我的回复迟到了。我无法立即验证它，因为我有一段时间无法访问我的环境。我唯一需要做的改变是：response(JSON.parse(data));

@ryuzakixd 你不应该这样做 - 我只是打错了。 datatype: "json" 应该是 dataType: "json" - 然后 jQuery 会为您处理解析。那么你就不需要额外的JSON.parse 电话了。我已经更新了答案以修复错字。