javascript - 如果用户删除单词则运行函数

Question

所以我有一个 jQuery 代码用于将关键字发送到另一个页面。在该页面上我有所有国家/地区的名称。我的代码也工作得很好，我定义了我的函数，条件是如果输入文本的长度超过 2，则运行其中的函数，但是，我遇到了这个问题，例如当我写下城市名称时，它工作得很好并从ajax页面返回正确的数据我的问题是当用户想要用退格键或其他东西删除该单词时我想删除所有以前发送到ajax页面的数据但由于我的情况它不起作用。

如何定义用户是否删除“运行我的函数”一词？

这是我的代码:

var prevXHR = null; //global
$('.country').each(function() {
  $(this).on('keyup', function(e) {
  var _this = this;
  var element = $(this).val().length;
  if (e.which !== 0 &&
     !e.ctrlKey && !e.metaKey && !e.altKey
    ){
		if (element > 2) {
		 var val = $(this).val()
		 $(this).val(val)
		 
		     prevXHR = $.ajax({
                 url: "ajaxpage.htm",
                 type: "get",
                 contentType: 'application/json; charset=utf-8',
                 data: {
                     key: $(this).val()
                 },
                 success: function(result) {

                 $(_this).closest(".search_div").find(".co").empty().html(result)

                 },
                 beforeSend: function(){
                     if(prevXHR && prevXHR.readyState != 20){
                         //before sending any new request neutralize any pending ajax call
                         prevXHR.abort();
                         prevXHR = null;
                     }
                 }

              });

			
		}
		
	}
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="search_div"> 
<input type="text" value=""  class="country" autocomplete="off" />
<div class="result"></div>
</div>

Answer 1

在您的代码中，您已经检查输入的长度是否大于 2，然后继续进行 ajax 调用。

只需在后面添加 else 部分即可。

if (element > 2) {
    // ...do the ajax stuff here
} else {
   // the input length was shorter than 2 characters...

   // remove all HTML elements here

   $('div#to_be_removed').remove();   //or something like that

}