Question

找到解决方案：

添加了一个带有display：none：

的课程

   .hidden { display: none; }

并添加了此功能：

$(function () {
    $('.preview').removeClass('hidden');
});

我有一个使用JS Autocomplete的搜索栏，带有容器（预览）和左表（leftspan）以及结果无序列表。

我有这个脚本来显示列表并在你点击容器时隐藏结果下拉容器：

   // Show the ul
$suggestedUL.show();
}
if ($(this).val() == '') {
$suggestedUL.hide();
}
},

focus: function(e) {
if ($(this).val() != '') {
$suggestedUL.show();
}
}
});

$suggestedHL.on('click', 'li', function(e) {
addSuggestion($(this));
});

$('body').on('click', function (e) {
      if (!$(e.target).closest('.suggest-holder li, .leftspan, .suggest-holder input').length) {
           $suggestedUL.hide();
           $preview.hide();
       };
});

然而，当页面第一次加载时，空的预览div是可见的（它有1px边框）

此外，如果我在输入字段中输入搜索后尝试单击返回列表，则上面的脚本会继续隐藏它。

是否有更好的功能来编写而不是隐藏，以便div在页面加载时隐藏，但在单击输入字段并再次返回后仍然可以运行？ < / p>

完整的HTML，JS和CSS下面：

var data = [{
		image: src = "a.jpg",
		name: 'apples',
		sku: '61583318'
		},
		{
		image: src = "b.jpg",
		name: 'oranges',
		sku: '924335'
		},
		{
		image: src = "c.jpg",
		name: 'strawberries',
		sku: '73940'
		},
		{
		    image: src = "d.jpg",
		    name: 'string bans',
		    sku: '66155'
		},
		{
		    image: src = "e.jpg",
		    name: 'grapes',
		    sku: '112509'
		},
		{
		    image: src = "f.jpg",
		    name: 'apricots',
		    sku: '112984'
	}];

    
    // Suggest Holder
    var $suggestedHL = $('.suggest-holder');
    // Suggestions UL
    var $suggestedUL = $('ul', $suggestedHL);
    // Suggestions LI
    var $suggestedLI = $('li', $suggestedHL);
    // Selected Items UL
    var $selectedUL = $('#selected-suggestions');
    // Preview Div
    var $preview = $('.preview');
    // Keyboard Nav Index
    var index = -1;

    function addSuggestion(el) {
    $selectedUL.append($('<li>' + el.find('.suggest-name').html() + '</li>'));
    }

    $('input', $suggestedHL).on({
    keyup: function(e) {
    var m = false;
    if (e.which == 38) {
    if (--index < 0) {
    index = 0;
    }

    m = true;
    } else if (e.which == 40) {
    if (++index > $suggestedLI.length - 1) {
    index = $suggestedLI.length - 1;
    }

    m = true;
    }

    if (m) {
    // Remove the active class
    $('li.active', $suggestedHL).removeClass('active');
    $suggestedLI.eq(index).addClass('active');
    } else if (e.which == 27) {
    index = -1;
    // Esc key
    $suggestedUL.hide();
    } else if (e.which == 13) {
    // Enter key
    if (index > -1) {
    addSuggestion($('li.active', $suggestedHL));
    index = -1;
    $('li.active', $suggestedHL).removeClass('active');
    }
    } else {
    index = -1;
    // Clear the ul
    $suggestedUL.empty();


    // Cache the search term
    $search = $(this).val();

    // Search regular expression
    $search = new RegExp($search.replace(/[^0-9a-z_]/i), 'i');

    // update the left box below search
    $('.leftspan').html('<span class="searching"><b>' + $('.suggest-prompt').val() + '</b></span><b><i> in Category XXX</i></b>');


    // Loop through the array
    for (var i in data) {
    if (data[i].name.match($search)) {
    $suggestedUL.append($("<li><span class='suggest-name'>" + data[i].name + "</span><span class='suggest-sku'>" + data[i].sku + "</span><img src=" + data[i].image + " class='suggest-image' /></li>"));
    }
    }


    // Show the ul
    $suggestedUL.show();
    }
    if ($(this).val() == '') {
    $suggestedUL.hide();
    }
    },
   
    focus: function(e) {
    if ($(this).val() != '') {
    $suggestedUL.show();
    }
    }
    });

    $suggestedHL.on('click', 'li', function(e) {
    addSuggestion($(this));
    });

    $('body').on('click', function (e) {
          if (!$(e.target).closest('.suggest-holder li, .leftspan, .suggest-holder input').length) {
               $suggestedUL.hide();
               $preview.hide();
           };
    });

body {background-color:#eeeeee;}
  
  .preview {
    border: 1px solid $gray-lighter;
    background-color: GREEN;
    width:63%;
    position:absolute;
    z-index:100;
}
 .preview ul {
    list-style: none;
    margin-top:5px;
    width: 65%;
  }

  .preview:li {
    padding: 5px;
    position: inherit;
  }

  li:hover {
    cursor: pointer;
  }

  li:hover,
  li.active {
    background: rgba(100, 100, 100, .2);
  }
}

.suggest-name {
  font-weight: bold;
  display: block;
  margin-left: 40px;
}

.suggest-sku {
  font-style: italic;
  font-size: $font-size-small;
  color: $gray-light;
}

.suggest-image {
  height: 35px;
  float: left;
  padding-right: 5px;
  margin-top: -20px;
}

.inlineblock {
  display: inline-block;
}

.leftspan {
  margin: 15px;
  display: inline-block;
  float: left;
}

.searching {
  color: $brand-primary;
}

header .search-block {
  input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 65% !important;
    @media (max-width: $screen-xs) {
      width: 47% !important;
    }
  }
  select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    margin-left: -5px;
    width: 20% !important;
    @media (max-width: $screen-xs) {
      width: 30% !important;
    }
  }
  button {
    vertical-align: top;
    width: 14% !important;
    @media (min-width: $screen-lg) {
      width: 8% !important;
    }
    @media (max-width:$screen-xs) {
      width: 21% !important;
    }
  }
  .form-group {
    > form {
      > * {
        display: inline-block;
      }
      @media (max-width:$screen-xs) {
        text-align: center;
        margin-left: 0;
        margin-right: 0;
        @include pad-sides(0);
      }
    }
  }
}

input:focus::-webkit-input-placeholder {
  color: transparent;
}

input:focus:-moz-placeholder {
  color: transparent;
}

input:focus::-moz-placeholder {
  color: transparent;
}

input:focus:-ms-input-placeholder {
  color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
    <div class="row">
  <form class="navbar-form suggest-holder">
    <input class="form-control input-lg suggest-prompt" type="text" placeholder="Search...">
      <select class="form-control input-lg">
      <option>All</option>
      <option>one</option>
      <option>two</option>
      <option>three</option>
    </select>
    <button type="submit" class="btn btn-primary btn-lg">Go</button>
        <div class="preview">
          <div class="leftspan">
          </div>
        <ul id='selected-suggestions' class="inlineblock selected-suggestions"></ul>
        </div>
    </form>
</div>

</body>
</html>

页面加载时自动完成搜索栏容器隐藏

0 个答案: