第一個和最後一個名稱字段上的JQuery UI自動完成

我會認爲別人會有這個問題，但我似乎無法在任何地方找到答案。我想有兩個輸入字段，名字和姓氏，具有相同的自動完成源。當用戶鍵入名字和姓氏字段時，我希望自動填充下拉列表通過將名字與姓氏字段和姓氏匹配到姓氏字段進行過濾。第一個和最後一個名稱字段上的JQuery UI自動完成

我目前的代碼，只是在兩個字段上實現自動完成。

$(function() { 
    var names = ["John Smith", "Jimothy Doe", "Stuart Brown"]; 
    $("#firstname").autocomplete({ 
    source: names 
    }); 
    $("#lastname").autocomplete({ 
    source: names 
    }); 
}); 


<input type='text' id='firstname' /> 
<input type='text' id='lastname' />

鍵入在第一場將顯示約翰·史密斯和Jimothy Doe的爲J，但在第二字段中鍵入一個S將只顯示約翰·史密斯，不斯圖爾特布朗。

它是如何工作目前：http://jsfiddle.net/HSYYz/1/

來源

2013-06-21 notblakeshelton

鯉魚。我想我沒有明智地選擇名字。我將編輯我的名字並添加一個鏈接。 – notblakeshelton

烏，我的不好。我誤解了你的問題。儘管如此，你不能指望自動完成知道你輸入的文字部分進行搜索 - 它使用整個字符串。如果你不想要它，你必須明確地告訴它。您可能需要考慮先分割輸入。 – j08691

@ j08691沒關係。我想我已經想通了。當我得到它的工作時，我會發佈一個答案。 – notblakeshelton

我不得不把函數源選項和自動完成構件的select事件。

$("#firstname, #lastname").autocomplete({ 
    source: function(request, response) { 
    term1 = $("#firstname").val(); 
    term2 = $("#lastname").val(); 
    names2 = new Array(); 
    i = 0; 
    while (i < names.length) { 
     namesSplit = names[i].split(RegExp(" +")); 
     j = 2; 
     while (j < namesSplit.length) { 
     namesSplit[1] += " " + namesSplit[j]; 
     j++; 
     } 
     if (namesSplit[0].match(term1) && namesSplit[1].match(term2)) { 
     names2.push(names[i]); 
     } 
     i++; 
    } 
    response(names2); 
    }, 
    select: function(event, ui) { 
    uiSplit = ui.split(RegExp(" +")); 
    $("#firstname").val(uiSplit[0]); 
    $("#lastname").val(uiSplit[1]); 
    } 
});

對不起，如果代碼有點粗糙;我不得不從咖啡轉換它。

來源

2013-06-24 15:46:32 notblakeshelton

我有同樣的問題，但也需要支持中間名匹配。我結束了三個功能，只是改變正則表達式來匹配不同的情況。

$("#firstnameInput").autocomplete({ 
     source: function(request, response) { 
      //matches first letter of the whole name 
      var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i"); 
      response($.grep(fullnavnArray, function(item){ 
       return matcher.test(item); 
      })); 
     } 
    }); 

    $("#middlenameInput").autocomplete({ 
     source: function(request, response) { 
      //matches "space" name "space" 
      var matcher = new RegExp("\\s" + $.ui.autocomplete.escapeRegex(request.term) +"\\w+\\s", "i"); 
      response($.grep(fullnavnArray, function(item){ 
       return matcher.test(item); 
      })); 
     } 
    }); 

    $("#lastnameInput").autocomplete({ 
     source: function(request, response) { 
      //matches "space" name 
      var matcher = new RegExp("\\s" + $.ui.autocomplete.escapeRegex(request.term)+"\\w+$", "i"); 
      response($.grep(fullnavnArray, function(item){ 
       return matcher.test(item); 
      })); 
     } 
    });

來源

2017-04-26 11:10:08

第一個和最後一個名稱字段上的JQuery UI自動完成

回答

相關問題