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

Question

嘿家伙需要一些帮助。我想知道是否可以添加一个函数，只匹配从左到右的字母，而不是将这个字母带到我当前的代码中。例如，如果我搜索A，并且我的列表只包含苹果和香蕉，苹果应该出现。我知道这已经被问到，但寻找一些适合我当前代码的东西。

$(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"> 
 
    \t \t <button class="btn btn-primary inputBtn" id="appSearchBtn" type="button">Search</button> 
 
\t \t </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://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"。

• A response回调，它需要一个参数：要建议给用户的数据。这些数据应根据所提供的术语进行过滤，并且可以采用上述任何一种简单本地数据格式。在请求期间提供自定义源回调以处理错误时，这很重要。即使遇到错误，您也必须始终致电response回拨。这可确保小部件始终具有正确的状态。

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

希望有所帮助。

Answer 3

这里是适应的一个例子来自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"> 
 
    \t \t <button class="btn btn-primary inputBtn" id="appSearchBtn" type="button">Search</button> 
 
\t \t </span> 
 
</div>