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

Question

当我输入列表中不可用的值时，我创建了一个自动完成文本框，它会自动清除结果正确的文本框，但是当我输入列表中的数据并添加一些数据时对它的措辞，文本框的值不清楚，尽管值的最终键不在列表中。

    $(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" />

问题

项目列表

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

Answer 1

我不是专家，但我觉得这种情况正在发生，因为当您通过单击选择其中一个选项时，autocomplete 小部件正在从实际的 input 中窃取焦点。基本上，您看到的具有焦点的输入实际上是小部件创建的叠加层，因此，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>