Cấu hình tìm kiếm tiện ích tự động hoàn thành giao diện người dùng jQuery

Question

Tôi đang xem xét sử dụng tiện ích jQuery UI autocomplete để triển khai tra cứu người dùng theo tên hoặc họ. Dường như tự động điền mặc định tra cứu các từ theo chuỗi ký tự bất kể sự xuất hiện của từ trong một từ. Vì vậy, nếu bạn có dữ liệu như: javascript, asp, haskell và bạn nhập vào 'as' bạn sẽ nhận được cả ba. Tôi muốn nó chỉ phù hợp với sự bắt đầu của từ. Vì vậy, trong ví dụ trên, bạn chỉ nhận được 'asp'. Có cách nào để định cấu hình tiện ích tự động điền để thực hiện việc này không?

Cuối cùng nó sẽ còn tốt hơn để match by beginning of first or last name giống như trong Gmail.

Lưu ý: Tôi đang cố gắng tìm ra cách để thực hiện việc này bằng cách sử dụng tiện ích con giao diện người dùng jQuery cụ thể. Vì tôi đã sử dụng jQuery UI trong dự án của mình, tôi đang lập kế hoạch để gắn bó với nó và cố gắng không thêm các thư viện bổ sung vào ứng dụng web của tôi.

Answer 1

Trong jQuery UI v1.8rc3, the autocomplete widget chấp nhận tùy chọn source có thể là chuỗi, mảng hoặc hàm gọi lại. Nếu đó là một chuỗi, tự động hoàn thành thực hiện GET trên URL đó để nhận các tùy chọn/đề xuất. Nếu một mảng, tính năng tự động hoàn thành thực hiện tìm kiếm, như bạn đã chỉ ra, cho sự hiện diện của các ký tự đã nhập ở bất kỳ vị trí nào trong các điều khoản của mảng. Biến thể cuối cùng là những gì bạn muốn - chức năng gọi lại.

Từ các tài liệu autocomplete:

Các biến thể thứ ba, gọi lại, cung cấp sự linh hoạt nhất, và có thể được sử dụng để kết nối bất kỳ nguồn dữ liệu để Autocomplete. Cuộc gọi lại nhận được hai đối số:

• Một đối tượng request, với một thuộc tính duy nhất được gọi là "thuật ngữ", đề cập đến giá trị hiện tại trong nhập văn bản.Ví dụ: khi người dùng nhập "new yo" vào trường thành phố được đặt thành tự động hoàn thành, request.term sẽ giữ "yo mới".
• Chức năng response, một cuộc gọi lại dự kiến ​​một đối số duy nhất chứa dữ liệu đề xuất cho người dùng. Dữ liệu này nên được lọc dựa trên thuật ngữ được cung cấp, và phải là một mảng trong định dạng được phép cho dữ liệu cục bộ đơn giản: String-Array hoặc Object-Array với nhãn/giá trị/cả hai thuộc tính.

Ví dụ mã:

var wordlist= [ "about", "above", "across", "after", "against", 
       "along", "among", "around", "at", "before", 
       "behind", "below", "beneath", "beside", "between", 
       "beyond", "but", "by", "despite", "down", "during", 
       "except", "for", "from", "in", "inside", "into", 
       "like", "near", "of", "off", "on", "onto", "out", 
       "outside", "over", "past", "since", "through", 
       "throughout", "till", "to", "toward", "under", 
       "underneath", "until", "up", "upon", "with", 
       "within", "without"] ; 

$("#input1").autocomplete({ 
    // The source option can be an array of terms. In this case, if 
    // the typed characters appear in any position in a term, then the 
    // term is included in the autocomplete list. 
    // The source option can also be a function that performs the search, 
    // and calls a response function with the matched entries. 
    source: function(req, responseFn) { 
     var re = $.ui.autocomplete.escapeRegex(req.term); 
     var matcher = new RegExp("^" + re, "i"); 
     var a = $.grep(wordlist, function(item,index){ 
      return matcher.test(item); 
     }); 
     responseFn(a); 
    } 
}); 

Một vài điểm chính:

• cuộc gọi đến $.ui.autocomplete.escapeRegex(req.term); Đó thoát các thuật ngữ tìm kiếm để bất kỳ điều khoản regex-ý nghĩa trong văn bản đánh máy bởi người dùng được coi là văn bản thuần túy. Ví dụ: dấu chấm (.) Có ý nghĩa để regex. Tôi đã học về hàm escapeRegex này bằng cách đọc mã nguồn tự động hoàn thành.
• dòng với new Regexp(). Nó chỉ định một regexp bắt đầu bằng^(Circumflex), ngụ ý, nó sẽ chỉ khớp khi các ký tự đã gõ xuất hiện ở đầu của từ trong mảng, đó là những gì bạn muốn. Nó cũng sử dụng tùy chọn "i" có nghĩa là một trận đấu không phân biệt chữ hoa chữ thường.
• tiện ích $.grep() chỉ gọi hàm được cung cấp trên mỗi cụm từ trong mảng được cung cấp. Hàm trong trường hợp này chỉ đơn giản là sử dụng regexp để xem cụm từ trong mảng có phù hợp với những gì được nhập hay không.
• cuối cùng, responseFn() được gọi với kết quả tìm kiếm.

bản demo làm việc: http://jsbin.com/ezifi

những gì nó trông giống như:

Chỉ cần một lưu ý: Tôi tìm thấy tài liệu trên autocomplete là chưa trưởng thành khá vào thời điểm này. Tôi đã không tìm thấy ví dụ mà đã làm điều này, và tôi không thể tìm thấy tài liệu làm việc trên đó các tập tin .css là cần thiết hoặc các lớp .css sẽ được sử dụng. Tôi đã học được tất cả điều này từ việc kiểm tra mã.

Xem thêm, how can I custom-format the Autocomplete plug-in results?

Answer 2

Tôi sử dụng tính năng tự động hoàn tất từ ​​devbridge. http://www.devbridge.com/projects/autocomplete/jquery/

Chỉ khớp với các ký tự bắt đầu.

alt text http://i46.tinypic.com/2ihq7pd.jpg

As far as phù hợp dựa trên tên hoặc tên cuối cùng, bạn sẽ chỉ phải cung cấp một danh sách tra cứu với tên đầu tiên và cuối cùng.

sử dụng Ví dụ:

var wordlist = [ 
     'January', 'February', 'March', 'April', 'May', 'June', 
     'July', 'August', 'September', 'October', 'November', 
     'December' ]; 

     var acOptions = { 
      minChars:2, 
      delimiter: /(,|;)\s*/, // regex or character 
      maxHeight:400, 
      width:300, 
      zIndex: 9999, 
      deferRequestBy: 10, // miliseconds 

      // callback function: 
      onSelect: function(value, data){ 
       //$('#input1').autocomplete(acOptions); 
       if (typeof data == "undefined") { 
        alert('You selected: ' + value); 
       }else { 
        alert('You selected: ' + value + ', ' + data); 
       } 
      }, 

      // local autosuggest options: 
      lookup: wordlist 
     }; 

Các lookup tùy chọn mà bạn vượt qua để khởi sự kiểm soát tự động hoàn có thể là một danh sách, hoặc một đối tượng. Ở trên cho thấy một danh sách đơn giản. Nếu bạn muốn có một số dữ liệu gắn liền với ý kiến ​​cho rằng có được trả lại, sau đó đưa ra tùy chọn lookup một đối tượng, như thế này:

var lookuplist = { 
    suggestions: [ "Jan", "Feb", "Mar", "Apr", "May" ], 
    data :   [ 31, 28, 31, 30, 31, ] 
}; 

Answer 3

Có another jQuery autocomplete plug-in rằng tùy chọn tìm kiếm chỉ vào lúc bắt đầu của từng hạng mục (tùy chọn là matchContains=false, tôi nghĩ rằng đó là mặc định quá).

Nếu không có tùy chọn như vậy trong plugin UI của jQuery, tôi đoán bạn sẽ phải sử dụng một plugin khác hoặc viết lại plugin bạn đang sử dụng ngay bây giờ.

Answer 4

Bạn lấy dữ liệu ở đâu để điền tự động hoàn thành? Là nó từ một cơ sở dữ liệu? Nếu có, bạn có thể thực hiện những gì bạn muốn trong truy vấn của mình và chỉ trả về các kết quả khớp với đầu mỗi từ (họ/tên)

Answer 5

thx cheeso cho intrducing jsbin.com,

tôi mở rộng mã của bạn để hỗ trợ các trận đấu thứ nhất và lastname, quá.

$("#input1").autocomplete({ 
     source: function(req, responseFn) { 
      addMessage("search on: '" + req.term + "'<br/>"); 

      var matches = new Array(); 
      var needle = req.term.toLowerCase(); 

      var len = wordlist.length; 
      for(i = 0; i < len; ++i) 
      { 
       var haystack = wordlist[i].toLowerCase(); 
       if(haystack.indexOf(needle) == 0 || 
       haystack.indexOf(" " + needle) != -1) 
       { 
        matches.push(wordlist[i]); 
       } 
      } 

      addMessage("Result: " + matches.length + " items<br/>"); 
      responseFn(matches); 
     } 
    }); 

demo: http://jsbin.com/ufimu3/

kiểu 'an' hoặc 'tái'

Answer 6

Nếu bạn muốn tìm kiếm sự khởi đầu của mỗi từ trong chuỗi, một giải pháp thanh lịch hơn để tay sai là để mất của cheeso nhưng chỉ dùng từ regexp ranh giới nhân vật đặc biệt:

var matcher = new RegExp("\\b" + re, "i"); 

Ví dụ: http://jsbin.com/utojoh/2 (thử tìm kiếm cho 'bl')