Jquery UI自动完成匹配首字母

时间:2017-04-25 16:15:33

标签: jquery-ui jquery-ui-autocomplete

嘿伙计们需要一些帮助。我想知道我是否可以添加一个函数来匹配从左到右的字母,而不是将任何单词带到我当前的代码。例如,如果我搜索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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

正如我评论的那样,你可以使用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()

希望有所帮助。

答案 2 :(得分:0)

这是一个解决方案,适应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>