CODEWITHSUNDEEP
jqueryautocompletetextbox
user3835327
user3835327

Reputation: 1204

Jquery autocomplete clear textbox value if match not found

I've made a autocomplete textbox when i key in the value which are not available in the list it will auto clear the textbox which the result is correct, but when i key in the data which are inside the list and added some wordings to it, the textbox value are not clear although the final key in value are not inside the list.

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

Problem

list of item
enter image description here

when i select any from the items and add extra wording to it. The values key are no match with the records, but the textbox values are not clear. I need to focus and onblur again the textbox, the textbox just will detect the match and clear the input.
enter image description here

Upvotes: 1

Views: 6809

Answers (2)

Irena Morkune
Irena Morkune

Reputation: 1

how if use mysql as a source how to clear text if not matches with 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>

Upvotes: 0

Wesley Smith
Wesley Smith

Reputation: 19571

Im no expert but I feel like this is happening because the autocomplete widget is stealing focus from the actual input when you select one of the options by clicking on it. Basically, the input you see that has focus is actually the overlay created by the widget therefore, the blur event is on that overlay not the actual input you bind the function to.

Adding select: function( event, ui ) { $(this).focus() } in your autocomplete options resolves the issue.

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

Upvotes: 1

Related Questions