텍스트 상자에 대한 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; 
} 

자바 스크립트

,

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 콜백이 트리거되어 목록을 닫습니다. 사용자가 선택을하면 하나를 이동하고 다음 번에 다시 설정합니다. 그렇지 않은 경우 사용자에게 경고하고 선택을 할 때까지 포커스를 유지할 수있는 몇 가지 기술을 적용합니다.