Question

我的旧标题是＆＃34;类似于JM UI自动完成的mustMatch＆＃34;但我不知道它是否足够解释。

我不确定是否显示我的代码会对此问题产生任何影响，所以我暂时将其删除。

我有JQuery UI Autocomplte小部件工作。我找到了一个边缘案例，我不确定如何处理。让我们说可搜索的值包括＆＃34; The Rage＆＃34;并输入一个名为＆＃34; The Rag＆＃34;。

的新项目

嗯，[ESC]键可让您退出自动完成功能而无需进行选择。在我的情况下这是可取的。

不可取的是，在这种情况下，如果有人输入＆＃34; The Rage＆＃34;然后点击[ESC]＆＃34; The Rage＆＃34;在输入字段中，但我的脚本不知道它是现有项目，所以我需要＆＃34;必须匹配，如果完全匹配可用＆＃34;

我正在初始化它：

$( "#company-name" ).autocomplete();
$( "#company-name" ).autocomplete({ source: "autocomplete/company_ac.php"});
$( "#company-name" ).autocomplete( "option", "minLength", 3 );
$( "#company-name" ).autocomplete({ autoFocus: true });
$( "#company-name" ).autocomplete( "enable" );

Answer 1

我是这样做的：

我在打开时已经将ac_selected设置为false：

  $( "#company-name" ).autocomplete({
    open: function(event, ui) {
      $( "#company-name" ).data( {ac_selected: false} );
    }
  });

然后我在autocompleteresponse

上设置另一个数据“found”

  $( "#company-name" ).on( "autocompleteresponse", function( event, ui ) {
    $( "#company-name" ).data({found: JSON.stringify(ui)} );
  } );

然后在关闭时检查匹配

  $( "#company-name" ).autocomplete({
    close: function(event, ui) {
      if ($( "#company-name" ).data("ac_selected")===false) {
        var needle = $( "#company-name" ).val();
        var haystack = JSON.parse( $( "#company-name" ).data("found") );
        // The array I need to filter is actually contained in the content property
        var result = haystack.content.filter(function ( input ) {
          return input.label.toLowerCase() === needle.toLowerCase(); // do a case insensitive search
        })[0];
        if(result){
          $( "#company-name" ).data( {ac_selected: true} );
          $( "#company-name" ).val(result.label);
        }
      }
    }
  });

如果完全匹配可用，则强制自动完成窗口小部件选择，但允许不匹配的条目

1 个答案: