jquery lĩnh vực autocomplete auto fill với giá trị 1 và Tô sáng thêm phần

Question

im sử dụng plugin autocomplete jQueryUI với mã sau đây

$(this).autocomplete({ 
       source: function(request, response) { 
        $.ajax({ url: 'clinic/auto', 
        data: { 'term': this.term,'name': this.element.attr('complete')}, 
        dataType: "json", 
        type: "POST", 
        success: function(data){ 
         response(data); 
        } 
       }); 
      }, 
      minLength: 2 
     }); 

hiển thị này một danh sách của tất cả các kết quả trong một thả xuống.

câu hỏi của tôi là làm thế nào để tôi làm cho nó tự động hoàn thành công việc cho u và làm nổi bật phần được thêm vào để sử dụng dễ dàng hơn?

tôi có phải mã hóa không? hoặc có một tùy chọn đã tồn tại cho điều đó? nếu tôi hv để làm nó hướng dẫn làm thế nào nó có thể được thực hiện? dụ pic:

Giải pháp cho đến nay:

Tôi đã tìm thấy này linkand this là rất hữu ích (khỉ vá jquery-autocomplete) để chỉnh sửa phong cách, nhưng vẫn không phải là điều tôi muốn ..

Answer 1

Thật không may, không có tùy chọn hiện tại cho nó. May mắn thay, có một cách khá đơn giản để làm điều đó bằng cách sử dụng các sự kiện được cung cấp với JQuery Autocomplete. Kiểm tra JSFiddle này: http://jsfiddle.net/RyTuV/133/

Như bạn sẽ nhận thấy, mã relavant bạn muốn thêm sử dụng JQuery Autocomplete Open event:

kích hoạt khi trình đơn đề nghị được mở ra hoặc cập nhật.

Sử dụng sự kiện này, bạn có thể thêm nội dung của mục đầu tiên trong danh sách với những gì đã được gõ vào đầu vào nộp, và sau đó làm nổi bật từ sau khi nhập văn bản đến cuối văn bản bổ sung:

$(this).autocomplete({ 
    source: function(request, response) { 
       $.ajax({ url: 'clinic/auto', 
       data: { 'term': this.term,'name': this.element.attr('complete')}, 
       dataType: "json", 
       type: "POST", 
       success: function(data){ 
        response(data); 
       } 
      }); 
    }, 
    minLength: 2, 
    open: function(event, ui) { 
     var firstElement = $(this).data("autocomplete").menu.element[0].children[0] 
      , inpt = $('#autocomplete') 
      , original = inpt.val() 
      , firstElementText = $(firstElement).text(); 

     /* 
      here we want to make sure that we're not matching something that doesn't start 
      with what was typed in 
     */ 
     if(firstElementText.toLowerCase().indexOf(original.toLowerCase()) === 0){ 
      inpt.val(firstElementText);//change the input to the first match 

      inpt[0].selectionStart = original.length; //highlight from end of input 
      inpt[0].selectionEnd = firstElementText.length;//highlight to the end 
     } 
    } 
}); 

Sử dụng mẫu này làm mẫu, bạn có thể lặp lại các mục trong menu để tìm khớp đầu tiên bắt đầu bằng văn bản nhập và sử dụng nó để điền và tô sáng thay vì chỉ sử dụng mục đầu tiên.

Answer 2

Bạn sẽ cần tự mã hóa hoặc xem liệu có plugin tự động hoàn thành khác thực hiện việc này hay không.

Để tự mã hóa, bạn cần tham chiếu sự kiện response để nhận văn bản kết quả phù hợp đầu tiên và đặt văn bản đó vào hộp nhập. Để thao tác văn bản đã chọn, hãy xem bài đăng này: Selecting Part of String inside an Input Box with jQuery

Answer 3

Tìm thấy câu trả lời ở trên, nhưng nó có trình đơn thả xuống từ jqueryUI nên tôi bắt đầu viết kịch bản của riêng mình. Và quyết định đăng nó ở đây. jsfiddle làm việc: https://jsfiddle.net/wb3kpxaj/

Code:

/* Need jquery to be extended with code snippet for selectrange i found somewhere, but forgot where...: */ 
$.fn.selectRange = function(start, end) { 
    var e = document.getElementById($(this).attr('id')); // I don't know why... but $(this) don't want to work today :-/ 
    if (!e) return; 
    else if (e.setSelectionRange) { e.focus(); e.setSelectionRange(start, end); } /* WebKit */ 
    else if (e.createTextRange) { var range = e.createTextRange(); range.collapse(true); range.moveEnd('character', end); range.moveStart('character', start); range.select(); } /* IE */ 
    else if (e.selectionStart) { e.selectionStart = start; e.selectionEnd = end; } 
    return $(e); }; 

autofill=['Banana', 'Banonas', 'Appel', 'Appelpie', 'Other', 'OtherMoreSpecific', 'OtherMoreDifferent']; 

$('#autofill').on('keyup', function(e) { 
    unvalidInputKeys=[8,9,13,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,46,91,92,93,112,113,114,115,116,117,118,119,120,121,122,123,144,145]; 
    if($(this).val().length>0&&!unvalidInputKeys.includes(e.keyCode)) { 
    for(i=0;i<autofill.length;i++) { 
     if(autofill[i].startsWith($(this).val())) { 
     userTypedLength=$(this).val().length; 
     $(this).val(autofill[i]); 
     $(this).selectRange(userTypedLength, autofill[i].length); 
     return; 
     } 
     } 
    } 
    });