Jquery UI自动完成匹配首字母输入

Question

嘿伙计们需要一些帮助。我想知道我是否可以添加一个函数来匹配从左到右的字母，而不是将任何单词带到我当前的代码。例如，如果我搜索A并且我的列表中包含Apple和Banana，那么Apple应该会出现。我知道这已经被问过，但是寻找适合我当前代码的东西。

$(document).ready(function() {
  $("input.autocomplete").autocomplete({
    minLength: 1,

    source: [{
        value: "Equipment Search",
        url: ''
      }
     
    ],
    select: function(event, ui) {
      window.open(ui.item.url);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="input-group">
  <input type="text" id="appsearch" class="form-control autocomplete" placeholder="Application Search" />
  <span class="input-group-btn">
    		<button class="btn btn-primary inputBtn" id="appSearchBtn" type="button">Search</button>
		</span>
</div>

Answer 1

一种方法是覆盖默认功能;

// Overrides the default autocomplete filter function to search only from the beginning of the string
$.ui.autocomplete.filter = function (array, term) {
    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
    return $.grep(array, function (value) {
        return matcher.test(value.label || value.value || value);
    });
};

这是这个工作的小提琴：

http://jsfiddle.net/yLdn3/324/

Answer 2

这是一个解决方案，适用于https://api.jqueryui.com/autocomplete/#entry-examples中的一个示例（使用自定义源回调仅匹配术语的开头）

$(document).ready(function() {
  var data = [{
      value: "Equipment Search",
      url: ''
    },
    {
      value: "Equipment Search Dev",
      url: ''
    },
    {
      value: "Equipment Search QA",
      url: ''
    },
    {
      value: "FCSF",
      url: ''
    },
    {
      value: "Hitch Matrix",
      url: ''
    },
    {
      value: "Kiosk Dev",
      url: ''
    },
    {
      value: "Kiosk",
      url: ''
    },
    {
      value: "MOAS",
      url: ''
    },
    {
      value: "POS Admin",
      url: ''
    },
    {
      value: "QA Tool Dev",
      url: ''
    },
    {
      value: "QA Tool",
      url: ''
    },
    {
      value: "RT Admin Tool",
      url: ''
    },
    {
      value: "Uchat Dev",
      url: ''
    },
    {
      value: "Uchat",
      url: ''
    },
    {
      value: "Uscan Service Logger (Dev)",
      url: ''
    },
    {
      value: "Uscan Service Logger",
      url: ''
    },
    {
      value: "VIP Look Up",
      url: ''
    },
  ];


  $("input.autocomplete").autocomplete({
    minLength: 1,
    source: function(request, response) {
      var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
      response($.grep(data, function(item) {
        return matcher.test(item.value);
      }));
    },
    select: function(event, ui) {
      window.open(ui.item.url);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="input-group">
  <input type="text" id="appsearch" class="form-control autocomplete" placeholder="Application Search" />
  <span class="input-group-btn">
    		<button class="btn btn-primary inputBtn" id="appSearchBtn" type="button">Search</button>
		</span>
</div>

Answer 3

正如我评论的那样，你可以使用Function for source来做到这一点。

工作示例：https://jsfiddle.net/Twisty/5gm0tmLh/

JavaScript的

var mySource = [{
  value: "Equipment Search",
  url: 'https://domaina.com/equipment/default.aspx'
}, {
  value: "Equipment Search Dev",
  url: 'https://domaina.com/equipment/default.aspx'
}, {
  value: "Equipment Search QA",
  url: 'https://domaina.com/equipment/default.aspx'
}, {
  value: "FCSF",
  url: 'http://domainb.com/aspnet35/POSLogin/Login.aspx?AppName=Console&ConsoleApp=CSF'
}, {
  value: "Hitch Matrix",
  url: 'https://domainc.com/secure/aspnet4/hitchmatrix/manage_hitches.aspx'
}, {
  value: "Kiosk Dev",
  url: 'http://domainc.com/aspnet3/kioskadmin/'
}, {
  value: "Kiosk",
  url: 'https://domaina.com/secure/kioskadmin/'
}, {
  value: "MOAS",
  url: 'https://domaina.com/tools/inventory_control/login_main.aspx?ReturnUrl=%2ftools%2finventory_control%2fOrderApproval.aspx%20'
}, {
  value: "POS Admin",
  url: 'https://domainb.com/POSAdmin'
}, {
  value: "QA Tool Dev",
  url: 'http://domainc.com/aspnet4/NewQAAdmin/login.aspx'
}, {
  value: "QA Tool",
  url: 'https://domaina.com/QAAdmin/login.aspx'
}, {
  value: "RT Admin Tool",
  url: 'https://domaina.com/secure/rta/login/adminlogin'
}, {
  value: "Uchat Dev",
  url: 'https://domaina.com/tools/uchat_app/publish.htm'
}, {
  value: "Uchat",
  url: 'https://domaina.com/tools/uchat_app/publish.htm'
}, {
  value: "Uscan Service Logger (Dev)",
  url: 'http://mdomainc.com/aspnet4/ServiceLogger/'
}, {
  value: "Uscan Service Logger",
  url: 'https://domainc.com/secure/aspnet4/ServiceLogger'
}, {
  value: "VIP Look Up",
  url: 'https://domaina.com/tools/certificate/default.aspx'
}, ];

$(function() {
  $("input.autocomplete").autocomplete({
    minLength: 1,
    source: function(req, resp) {
      var q = req.term;
      var myResponse = [];
      $.each(mySource, function(key, item) {
        if (item.value.toLowerCase().indexOf(q) === 0) {
          myResponse.push(item);
        }
      });
      resp(myResponse);
    },
    select: function(event, ui) {
      window.open(ui.item.url);
    }
  });
});

来自API：

功能：第三种变体，即回调，提供最大的灵活性，可用于将任何数据源连接到自动完成。回调有两个参数：

• request对象，具有单个term属性，指的是当前文本输入中的值。例如，如果用户在城市字段中输入"new yo"，则自动完成术语将等于"new yo"。
• 一个response回调，它需要一个参数：向用户建议的数据。应根据提供的术语过滤此数据，并且可以采用上述任何简单本地数据格式。在提供自定义源回调以处理请求期间的错误时，这很重要。即使遇到错误，也必须始终调用response回调。这可确保窗口小部件始终具有正确的状态。

在本地过滤数据时，您可以使用内置的$.ui.autocomplete.escapeRegex函数。它将采用单个字符串参数并转义所有正则表达式字符，使结果安全传递给new RegExp()。

希望有所帮助。