當光標離開輸入框＃select-or-enter-category時，此代碼檢查下拉列表中是否存在給定的輸入

Question

我有用於顯示警告消息的這段代碼：

<div class="row clearfix">
  <div class="col-sm-8 col-sm-offset-2">
    <div>
      <div class="form-line focus">
        <span class="category-status" style="color: red;">
          This entered category is not found in the category list.<br> 
          Press button on the right to save this new category.
        </span>
      </div>
    </div>
  </div>
</div>

然后，我將另一個代碼用於預輸入下拉列表：

<div class="row clearfix">
  <div class="col-sm-7 col-sm-offset-2">
    <div class="form-group form-float">
      <div class="form-line focus">
        <input type="hidden" id="cat-id" name="category_id" value="">
        <input type="text" id="select-or-enter-category" name="category" data-provide="typeahead" 
        placeholder="Enter/Select a category" value="" required="required" class="form-control">
      </div>
    </div>
  </div>
  <div class="col-sm-1">
    <button type="button" id="save-category" data-toggle="tooltip" data-placement="top" title="" 
      class="btn btn-warning" data-original-title="Save this input as New Category">
        <i aria-hidden="true" class="fa fa-bookmark-o" style="display: inline;"></i>
    </button>
  </div>
</div>

這是我的javascript / jquery代碼：當用戶在輸入框#select-or-enter-category輸入關鍵字時，此javascript代碼將為給定關鍵字的預#select-or-enter-category提供下拉菜單。

/**
 * Autocomplete for category - ADD TASK MODAL
 * @return {[type]} [description]
 */
$(document).ready(function(){
  axios_get('/axiosCategory', function(data) {
    var cat    = [];
    var $input = $("#select-or-enter-category");
    let temp;

    data.forEach(function(item) {
      temp = {
        id: item.id,
        name: item.categoryName
      }
      cat.push(temp);
    });

    $input.typeahead({
      source: cat,
      autoSelect: true
    });

    $input.change(function() {
      // console.log($input);
      var current = $input.typeahead("getActive");
      if (current) {
        $('#cat-id').val(current.id);
      }
    });
  });
});

當光標離開輸入框#select-or-enter-category ，此代碼檢查給定輸入是否存在於下拉列表中。 如果不是，則會顯示警告消息，要求用戶將輸入保存為新類別。

/**
 * Display the message asking the user to save the
 * new category
 *
 * @return void
 */
$('#select-or-enter-category').focusout(function() {
  let val = $(this).val();

  axios_get('/axiosCategory', function(data) {
    let search = false;

    data.forEach(function(item) {
      if (val == item.categoryName) {
        search = true;
      }
    });

    if (search == false) {
      $('.category-status').removeAttr('hidden');
    } else {
      $('.category-status').attr('hidden', true);
    }
  });
});

然后的問題是，當用戶使用鼠標從下拉菜單中單擊某個項目時，錯誤消息就會顯示出來，這不是我想要發生的事情。

我希望僅在光標實際離開輸入框#select-or-enter-category時顯示錯誤消息。

但是，如果用戶僅使用鍵盤從下拉菜單中選擇一項並輸入，則沒有問題。

你有什么建議嗎？

Answer 1

試試這個

$(document).ready(function(){
  axios_get('/axiosCategory', function(data) {
    dataGlobal = data;

    var cat    = [];
    var $input = $("#select-or-enter-category");
    let temp;

    data.forEach(function(item) {
      temp = {
        id: item.id,
        name: item.categoryName
      }
      cat.push(temp);
    });

    $input.typeahead({
      source: cat,
      autoSelect: true
    });

    $input.change(function() {
      var current = $input.typeahead("getActive");
      if (current) {
        $('#cat-id').val(current.id);
      }
    });

    $input.focusout(function() {
      let val     = $('#select-or-enter-category').val();
      let current = $input.typeahead("getActive");
      let search  = false;
      let str     = current.name.substring(0,val.length);

      if (str == val) {
        val = current.name;
      }

      dataGlobal.forEach(function(item) {
        if (val == item.categoryName) {
          search = true;
        }
      });

      if (search == false) {
        $('#category-status').removeAttr('hidden');

      } else {
        $('#category-status').attr('hidden', 'hidden');
      }
    });
  });
});