Jquery 如果找不到匹配项，自动完成清除文本框值

Question

我创建了一个自动完成文本框，当我键入列表中不可用的值时，它会自动清除结果正确的文本框，但是当我键入列表中的数据并且加了一些文字，虽然最后的key in value不在list里面，但是textbox的值还是不清楚

    $(document).ready(function() {

    var source = ['jQuery', 'Dojo', 'ExtJs', 'Prototype', 'Java', 'Android', 'MySQL', 'PHP'];

    $("input#myDropDown").autocomplete({
        minLength: 0,
        source: source,
        autoFocus: true,
        scroll: true,
    }).focus(function() {
        $(this).autocomplete("search", "");
    }).live("blur", function(event) {
        var autocomplete = $(this).data("autocomplete");
        var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i");
        autocomplete.widget().children(".ui-menu-item").each(function() 
          {
            var item = $(this).data("item.autocomplete");
            if (matcher.test(item.label || item.value || item)) {
                //There was a match, lets stop checking
                autocomplete.selectedItem = item;
                return;
            }
        });

        if (autocomplete.selectedItem) {
            autocomplete._trigger("select", event, {
                item: autocomplete.selectedItem
            });
        //there was no match, clear the input
        } else {
            $(this).val('');
        }
    });
});

    .ui-autocomplete { 
                        position: absolute; 
                        cursor: default; 
                        height: 150px; 
                        overflow-y: scroll; 
                        overflow-x: hidden;
                     }

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>

       <input id="myDropDown" type="text" name="myDropDown" />

问题

项目列表

当我 select 任何项目并为其添加额外的措辞时。值键与记录不匹配，但文本框值不明确。我需要再次聚焦并模糊文本框，文本框只会检测匹配项并清除输入。

Answer 1

我不是专家，但我觉得这种情况正在发生，因为 autocomplete 小部件正在从实际 input 中窃取焦点，当您 select 单击其中一个选项时。基本上，您看到的具有焦点的输入实际上是由小部件创建的叠加层，因此，blur 事件位于该叠加层上，而不是您将函数绑定到的实际 input。

在自动完成选项中添加 select: function( event, ui ) { $(this).focus() } 可解决问题。

$(document).ready(function() {
  var source = ['jQuery', 'Dojo', 'ExtJs', 'Prototype', 'Java', 'Android', 'MySQL', 'PHP'];

    $("input#myDropDown").autocomplete({
        minLength: 0,
        source: source,
        autoFocus: true,
        scroll: true,
        select: function( event, ui ) { $(this).focus() }
    }).focus(function() {
        $(this).autocomplete("search", "");
    }).live("blur", function(event) {
        var autocomplete = $(this).data("autocomplete");
        var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i");
        autocomplete.widget().children(".ui-menu-item").each(function() 
          {
            var item = $(this).data("item.autocomplete");
            if (matcher.test(item.label || item.value || item)) {
                //There was a match, lets stop checking
                autocomplete.selectedItem = item;
                return;
            }
        });

        if (autocomplete.selectedItem) {
            autocomplete._trigger("select", event, {
                item: autocomplete.selectedItem
            });
        //there was no match, clear the input
        } else {
            $(this).val('');
        }
    });
});

.ui-autocomplete { 
                        position: absolute; 
                        cursor: default; 
                        height: 150px; 
                        overflow-y: scroll; 
                        overflow-x: hidden;
                     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>


       <input id="myDropDown" type="text" name="myDropDown" />

Answer 2

如果使用 mysql 作为来源，如果与 db 不匹配，如何清除文本？

<script type="text/javascript">
 $(document).ready(function(){
  $("#kodebrg").change(function(){
   var kodebrg = $("#kodebrg").val();
   $.ajax({
    url: "getperangkatnama.php",
    data: "kodebrg=" + kodebrg,
    dataType: 'json',
    cache: false,
    success: function(data){
     $("#namabrg").html(data.namabrg);
     
     //$("#idbag").html(data.idbag);
    }
   });
  }); 

 });
</script>

Jquery 如果找不到匹配项，自动完成清除文本框值

Jquery autocomplete clear textbox value if match not found

jquery

textbox

autocomplete

问题