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回调，因为它是现在关闭列表。如果用户已经做出选择，我们移动一个并在下次重置。如果没有，我们应用一些技巧来提醒用户并保持专注，直到他们做出选择。