jQuery的自動完成的文本框不應該允許比自動完成列表

Question

jQuery的自動完成的文本框不應該允許比自動完成列表。其他數據以外的數據，但問題是我需要從列表中自動完成列表中，但不是隻允許數據任何其他數據，即使用戶輸入任何其他數據，我們我需要彈出一個信息框，請從自動完成列表中選擇。

鏈接顯示在下面還允許比自動完成建議的任何其它數據：

$("#field").autocomplete({ 
    source: countries_starting_with_A, 
    minLength: 1, 
    select: function(event, ui) { 
     // feed hidden id field 
     $("#field_id").val(ui.item.id); 
     // update number of returned rows 
     $('#results_count').html(''); 
    }, 
    open: function(event, ui) { 
     // update number of returned rows 
     var len = $('.ui-autocomplete > li').length; 
     $('#results_count').html('(#' + len + ')'); 
    }, 
    close: function(event, ui) { 
     // update number of returned rows 
     $('#results_count').html(''); 
    }, 
    // mustMatch implementation 
    change: function (event, ui) { 
     if (ui.item === null) { 
      $(this).val(''); 
      $('#field_id').val(''); 
     } 
    } 
}); 

http://jsfiddle.net/handtrix/32Bck/

Answer 1

有很多方法可以做到這一點。這裏有一個建議：

工作實例：http://jsfiddle.net/Twisty/32Bck/560/

HTML

<div class="ui-widget" style="position: relative;"> 
    <input type="text" placeholder="type something ..." id="suggest" /> 
</div> 

CSS

body { 
    padding: 30px; 
} 

input.ui-state-alert { 
    border: 1px inset #F00; 
} 

的JavaScript

var makeSelect = false; 
$(document).ready(function() { 
    function requiredValid(target) { 
    target = $(target); 
    // Return Focus 
    target.focus(); 
    // Add alert class 
    target.addClass("ui-state-alert"); 
    $("<div>", { 
     class: "required-alert-text", 
     style: "color: #F00; font-size: 10px; display: inline-block; position: absolute;" 
    }).html("Must select from list.").insertAfter(target).position({ 
     my: "bottom", 
     at: "top+5", 
     of: target 
    }); 
    } 
    $("#suggest").autocomplete({ 
    delay: 100, 
    source: function(request, response) { 
     // Suggest URL 
     var suggestURL = "http://suggestqueries.google.com/complete/search?client=chrome&q=" + request.term; 

     // JSONP Request 
     $.ajax({ 
      method: 'GET', 
      dataType: 'jsonp', 
      jsonpCallback: 'jsonCallback', 
      url: suggestURL 
     }) 
     .success(function(data) { 
      response(data[1]); 
     }); 
    }, 
    select: function(e, ui) { 
     makeSelect = true; 
    }, 
    close: function(e, ui) { 
     if (makeSelect) { 
     makeSelect = false; 
     $(".ui-state-alert").removeClass("ui-state-alert"); 
     $(".required-alert-text").remove(); 
     } else { 
     requiredValid(this); 
     } 
    } 
    }); 
    $(".ui-state-alert").on("blur", function() { 
    $(this).focus(); 
    }) 
}); 

這不會涵蓋所有情況。基本上，我們想知道用戶是否從列表中進行選擇。我創建makeSelect並賦予它作爲false。我們假設用戶沒有這樣做。

當用戶選擇列表選項時，select回調被觸發並更新變量。這也引發close回調，因爲它是現在關閉列表。如果用戶已經做出選擇，我們移動一個並在下次重置。如果沒有，我們應用一些技巧來提醒用戶並保持專注，直到他們做出選擇。