テキストボックスの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

これを行うには多くの方法があります。

実施例：ここでは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コールバックがトリガーされます。ユーザーが選択を行った場合、ユーザーは1つを移動して次回にリセットします。そうでない場合は、ユーザーに警告し、選択を行うまでフォーカスを維持するいくつかの手法を適用します。