tự động điền ở giữa văn bản (như Google Plus)

Question

Có rất nhiều tùy chọn để thực hiện tự động hoàn thành. Hầu hết trong số họ dường như làm việc trên vài chữ cái đầu tiên được gõ.

Trong Google Plus, tùy chọn tự động điền sẽ ngừng hoạt động ngay sau khi nhập @, bất kể nó xuất hiện ở đâu trong trường biểu mẫu và sử dụng các chữ cái ngay sau @ để hướng dẫn tự động hoàn tất. (Nó cũng có vẻ khá đẹp!)

Có ai chia sẻ mã để làm điều này không?

Có ai có bất kỳ gợi ý nào để cố gắng triển khai phiên bản đồ chơi này (ví dụ: trong jQuery) không?

Answer 1

Điều này có thể với jQueryUI's autocomplete widget. Cụ thể, bạn có thể điều chỉnh this demo để đáp ứng yêu cầu của bạn. Dưới đây là một ví dụ:

function split(val) { 
    return val.split(/@\s*/); 
} 

function extractLast(term) { 
    return split(term).pop(); 
} 

var availableTags = [ ... ]; // Your local data source. 

$("#tags") 
// don't navigate away from the field on tab when selecting an item 
.bind("keydown", function(event) { 
    if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) { 
     event.preventDefault(); 
    } 
}).autocomplete({ 
    minLength: 0, 
    source: function(request, response) { 
     var term = request.term, 
      results = []; 
     if (term.indexOf("@") >= 0) { 
      term = extractLast(request.term); 
      if (term.length > 0) { 
       results = $.ui.autocomplete.filter(
       availableTags, term); 
      } 
     } 
     response(results); 
    }, 
    focus: function() { 
     // prevent value inserted on focus 
     return false; 
    }, 
    select: function(event, ui) { 
     var terms = split(this.value); 
     // remove the current input 
     terms.pop(); 
     // add the selected item 
     terms.push(ui.item.value); 
     // add placeholder to get the comma-and-space at the end 
     terms.push(""); 
     this.value = terms.join(""); 
     return false; 
    } 
}); 

Và ở đây nó đang làm việc: http://jsfiddle.net/UdUrk/

Hãy cho tôi biết nếu bạn cần thêm bất kỳ thông tin (chẳng hạn như làm thế nào để làm cho nó làm việc với một nguồn dữ liệu từ xa).

Cập nhật: Đây là ví dụ sử dụng nguồn dữ liệu từ xa (API của StackOverflow): http://jsfiddle.net/LHNky/. Nó cũng bao gồm hiển thị tùy chỉnh các đề xuất tự động điền.

Answer 2

bạn có thể sử dụng sự kiện tìm kiếm tự động hoàn tất để phát hiện xem văn bản có @ trong đó hay không. Nếu nó không phải là @ thì chỉ cần trả về false và tự động hoàn thành sẽ không hoạt động.

ví dụ: $ (".selector") .autocomplete ({ tìm kiếm: function (sự kiện, ui) {...} });

Answer 3

Tôi đã viết một plugin jQuery dựa trên chức năng tự động hoàn thành giao diện người dùng jQuery. Đây là giải pháp của tôi:

http://www.hawkee.com/snippet/9391/

Bạn gọi nó là như thế này:

$('#inputbox').triggeredAutocomplete({ 
    hidden: '#hidden_inputbox', 
    source: "/search.php", 
    trigger: "@" 
}); 

Answer 4

tôi đã viết một plugin bootstrap cho việc này. Nó hoạt động không có vấn đề nơi @ xảy ra trong lĩnh vực hình thức. Nó dành cho div có thể chỉnh sửa nội dung thay vì vùng văn bản: http://sandglaz.github.com/bootstrap-tagautocomplete/

Answer 5

Để giải thích câu trả lời của Andrew Whittaker một chút, tùy chọn source của jQuery UI Tự động điền được sử dụng để chỉ định mảng chứa các mục sẽ được hiển thị trong danh sách thả xuống một lần tiện ích được kích hoạt. Nó có thể được định nghĩa như là một mảng, một hàm trả về một mảng như vậy, hoặc một URL tới một tài nguyên tạo ra một mảng như vậy.

Nếu source được định nghĩa là hàm, các tham số của hàm, request và response, có thể được sử dụng để giúp tạo mảng trả về và cung cấp cho tiện ích tương ứng. request đặc biệt là bạn quan tâm, kể từ khi thành viên của nó, term chứa giá trị của phần tử đầu vào mà tiện ích được gắn vào, tại thời điểm hàm được gọi.

Xem nơi tôi sẽ làm việc này?Cách phân tích cú pháp đơn giản, đơn giản request.term cho văn bản giữa biểu tượng quan tâm và con trỏ @ và sử dụng văn bản đó để tạo mảng để cung cấp cho tiện ích. Bạn sẽ cần phải làm một công việc nhỏ (hoặc sử dụng một số chức năng sẵn sàng) để có thể xác định vị trí con trỏ một cách đáng tin cậy theo cách tương thích giữa các trình duyệt.

Kiểm tra Mentionator nếu bạn đang tìm kiếm trình cắm hiện có cung cấp chức năng bạn đang cố gắng mô phỏng. Nó được cấu trúc tốt, dễ theo dõi và nhận xét một cách tỉ mỉ, vì vậy bạn sẽ gặp khó khăn trong việc hiểu cách thực hiện phương pháp mà tôi đã mô tả. Nó cũng được duy trì bởi bạn thật sự :).