2009-04-28 43 views
22

Chúng tôi đang sử dụng plugin jquery tự động hoàn tất được viết bởi Jörn Zaefferer và đang cố gắng xác minh một tùy chọn hợp lệ được nhập.Tự động điền JQuery xác minh giá trị đã chọn

Plugin có kết quả() sự kiện kích hoạt khi lựa chọn được thực hiện. Điều này là OK, nhưng tôi cần phải kiểm tra giá trị trong hộp văn bản khi người dùng nhấp vào quá. Vì vậy, chúng tôi đã thử một sự kiện .change() và .blur(), nhưng cả hai đều đặt ra một vấn đề: khi bạn nhấp vào một mục trong div kết quả (danh sách 'đề xuất') .change() và .blur() sự kiện cháy, và điều này là trước khi các plugin đã viết một giá trị cho hộp văn bản, do đó, không có gì để xác minh tại thời điểm này.

Ai đó có thể giúp tôi định cấu hình sự kiện để bất cứ khi nào có ai đó nhấp chuột, nhưng không phải trong hộp kết quả, tôi có thể kiểm tra giá trị hợp lệ trong hộp. Nếu đây là cách tiếp cận sai, xin vui lòng thông báo cho tôi một cách chính xác. Ban đầu chúng tôi đã đi kèm với plugin này vì tùy chọn 'mustMatch' của nó. Tùy chọn này dường như không hoạt động trong mọi trường hợp. Nhiều lần mục nhập hợp lệ sẽ được ghi vào hộp văn bản và được xóa bởi plugin không hợp lệ, tôi không thể xác định được lý do tại sao.

Mã Basic dụ:

<html> 
<head> 
<title>Choose Favorite</title> 
<script language="JavaScript" src="jquery-1.3.2.min.js" ></script> 
<script language="JavaScript" src="jquery.autocomplete.min.js" ></script> 
<script> 
    $(".suggest").autocomplete("fetchNames.asp", { 
     matchContains:false, 
     minChars:1, 
     autoFill:false, 
     mustMatch:false, 
     cacheLength:20, 
     max:20 
    }); 

    $(".suggest").result(function(event, data, formatted) { 
     var u = this; 
     // Check value here 

    }); 

    /* OR */ 

    $(".suggest").change(function(me) { 
     //check value here 
    }); 

</script> 
</head> 
<body> 
    <label for="tbxName">Select name (I show 10):</label><br /> 
    <INPUT type="text" id="tbxName" name="tbxName" class="suggest"><br /> 
</body> 
</html> 
+0

Tôi tìm thấy câu trả lời tốt nhất ở đây bởi Victor http://stackoverflow.com/questions/4952094/jquery-ui-autocomplete-only-allow-selected-valued-from-suggested-list –

+0

Đó là một giải pháp tốt. Tôi sẽ phải thử rằng lần sau tôi cần chức năng này. – Brettski

+0

thấy rằng: http://stackoverflow.com/questions/1267149/how-to-detect-when-user-ignores-jquery-autocomplete-suggestions –

Trả lời

4

UPDATE: này nên làm việc. Tôi đang tải danh sách các tên vào một mảng được gọi là ListOfNames, điều này được sử dụng trong sự kiện onBlur() để xác minh tên được nhập vào dữ liệu. Bạn có thể cần phải làm một số điều chỉnh, nhưng tôi nghĩ rằng nó nên làm những gì bạn đang tìm kiếm.

var listOfNames = []; 
$(document).ready(function(){ 
    $.get("fetchNames.asp", function(data){ 
    listOfNames = data.split("\r\n");  
    }); 
    $(".suggest").autocomplete("fetchNames.asp", { 
     matchContains:false, 
     minChars:1, 
     autoFill:false, 
     mustMatch:false, 
     cacheLength:20, 
     max:20 
    }); 
    $("#tbxName").blur(function(){ 
     if(!listOfNames.containsCaseInsensitive(this.value)){ 
      alert("Invalid name entered"); 
     } 
    });   
}); 

Array.prototype.containsCaseInsensitive = function(obj) { 
    var i = this.length; 
    while (i--) { 
    if (this[i].toUpperCase() === obj.toUpperCase()) { 
     return true; 
    } 
    } 
    return false; 
} 
+0

Cảm ơn bạn đã phản hồi. Điều này không hoàn toàn làm điều đó.Nếu tôi chọn một giá trị, nó sẽ điền vào đúng, một khi tôi nhấp vào nó lỗi, không hợp lệ. Nếu tôi nhập một vài ký tự thì hãy nhấp chuột đi, không có lỗi nào được nêu ra, mặc dù tôi cần phải kiểm tra db của mình. – Brettski

+0

Điều gì được kích hoạt trước, .blur() hoặc .change()? – Brettski

+0

Cảm ơn bạn một lần nữa vì câu trả lời của bạn. Các tên có thể quay trở lại từ fetchnames.asp là 32.000, không chắc chắn nếu tôi muốn lưu trữ tất cả dữ liệu đó trong một mảng. Tôi thích cách tiếp cận mặc dù – Brettski

9

Tôi nghĩ thay vì viết chức năng của riêng bạn để xác minh xem dữ liệu có khớp hay không, bạn chỉ có thể gọi search(). Nếu result() được gọi với tham số rỗng là data thì bạn biết rằng tự động hoàn tất không được sử dụng và bằng cách gọi search() khi làm mờ, bạn được đảm bảo nhận được result() được gọi ít nhất một lần.

Tôi đã đăng mã này cho a similar question, nó cũng có thể trợ giúp ở đây.

autocompleteField.result(function(event, data, formatted) { 
    if (data) { 
     //auto-complete matched 
     //NB: this might get called twice, but that's okay 
    } 
    else { 
     //must have been triggered by search() below 
     //there was no match 
    } 
}); 

autocompleteField.blur(function(){ 
    autocompleteField.search(); //trigger result() on blur, even if autocomplete wasn't used 
}); 
+0

Câu trả lời hay! Bạn có biết làm thế nào để ngăn chặn sự kiện kết quả bắn hai lần? Đây là vấn đề, nếu sự kiện này thực hiện một số logic phức tạp, như xác thực đầu vào trên máy chủ thông qua yêu cầu ajax. – Kamarey

+0

Nếu bạn đang thực hiện quá trình xử lý trong '.result()', bạn có thể cố gắng duy trì một cờ để xem liệu chi nhánh 'if (data)' của bạn đã được gọi hay chưa. Tôi có thể cảnh báo bạn rằng điều này sẽ không tầm thường: bạn có thể dễ dàng đặt cờ ở cuối 'if (data)', nhưng bạn sẽ cần xóa nó trong trường hợp người dùng chỉnh sửa đề xuất được hoàn thành tự động. Tôi sẽ thử sử dụng '.change()' cho điều đó. Chúc may mắn! – npdoty

0

tôi sử dụng một cấu trúc dữ liệu toàn cầu để theo dõi các giá trị đã được tìm thấy

var ac_sent = {}; 

các .result() xử lý sự kiện được gọi là trước khi xử lý sự kiện .change(), vì vậy trong. kết quả (sự kiện, dữ liệu, định dạng) tôi thêm dữ liệu vào cấu trúc:

ac_sent[ data ] = true; 

sau đó trong .change (sự kiện) xử lý sự kiện tôi kiểm tra để xem nếu có một mục tại ac_sent [dữ liệu], và nếu không có gì, tôi biết rằng wo không tìm thấy thứ tự:

$("#textbox").change(function(event) { 

    var data = event.target.value; 

    if (!ac_sent[ data ]) { 
    // result was not found in autocomplete, do something... 
    ac_sent[ data ] = true; // remember that we processed it 
    } 

    return false; 
}); 
+0

Sự kiện kết quả() kích hoạt trước sự kiện change() không chính xác 100%. Nó xảy ra theo thứ tự đó nếu phím Enter được sử dụng để chọn một mục từ danh sách. Tuy nhiên, nếu chuột được sử dụng thì thứ tự sự kiện bị đảo ngược - thay đổi() xảy ra trước, sau đó là kết quả(). – Jason

1

Đây là mã tôi đã sử dụng trong quá khứ. Rất sạch sẽ và đơn giản.

var availableTags = [ 
    "ActionScript", 
    "AppleScript", 
    "Asp", 
    "BASIC", 
    "C", 
    "C++", 
    "Clojure", 
    "COBOL", 
    "ColdFusion", 
    "Erlang", 
    "Fortran", 
    "Groovy", 
    "Haskell", 
    "Java", 
    "JavaScript", 
    "Lisp", 
    "Perl", 
    "PHP", 
    "Python", 
    "Ruby", 
    "Scala", 
    "Scheme" 
]; 
$("#currentSelectedLevel").autocomplete({ 
    source: availableTags, 
    change: function(event, ui) { 
     val = $(this).val(); 
     exists = $.inArray(val,availableTags); 
     if (exists<0) { 
      $(this).val(""); 
      return false; 
     } 
     } 
}); 
+0

Giải pháp sạch nhất cho đến nay. Lưu ý rằng bạn sẽ muốn đảm bảo rằng 'val' được viết hoa phù hợp để đáp ứng nguồn dữ liệu của bạn, nếu không nó sẽ không khớp. Ví dụ. 'actionscript' không giống với' ActionScript'. – Optimae

Các vấn đề liên quan