Question

我有一个特定的要求，我需要一个文本字段中的列表，该列表应该显示输入字的等效字。这听起来类似于自动完成，但不同的是，如果用户键入Color，建议应该显示Color，他完成输入Color的时刻，反之亦然。这将永远不会发生在自动完成中。在自动完成时，只有单词具有公共字母时，才会显示建议。我正在关注此链接。 https://jqueryui.com/autocomplete/

但这不符合上述要求。后来我尝试创建一个自定义列表，一旦用户完成单词，就会填充该列表。但是除非我删除最后3个字符（在上面的场景中）并且返回到两个字母共有的地方，否则列表仍然不会显示。

请建议。任何帮助表示赞赏。

Answer 1

使用selectAllValue选项的函数源。然后，您可以确定任何给定的术语，返回的匹配项。在下面的例子中，我定义了两个替换列表 - teh / the和color / color。如果用户键入autocomplete，他们将同时收到这两项建议。输入col后，它会显示color。类似于colour和teh。

如果你不想让它在完全匹配之前返回，那么摆脱the逻辑（实际上是lastIndexOf等价物。

startsWith

$( function() {
    
    var availableTags = [
    	["color", "colour"],
      ["the", "teh"]
    
    ];

    var tagFunction = function(request, response) {
      var term = request.term.toLowerCase();
    	for (var i = 0; i < availableTags.length; i++)
      {      
        if (availableTags[i][0].lastIndexOf(term, 0) === 0 
            && availableTags[i][1].lastIndexOf(term, 0) === 0)
        {
          response(availableTags[i]);
        }
      	else if (availableTags[i][0].lastIndexOf(term, 0) === 0)
        {
        	response([availableTags[i][1]]);
        }
        else if (availableTags[i][1].lastIndexOf(term, 0) === 0)
        {
          response([availableTags[i][0]]);
        }
      }
    }
    
    $( "#tags" ).autocomplete({
      source: tagFunction
    });
  } );

自定义组件类似于JQUERY中的自动填充

1 个答案: