https://jsfiddle.net/1exbCzjy/

<body>
<section class="main">
<form class="search" action="">
    <input type="search" id ="searchit" placeholder="search.." />
    <ul class="results" id="searchlist">
    </ul>
</form>
</section>
</body>  

Jest to demo kodu, który próbuję uruchomić, mój oryginalny kod zawiera plik JS, który dynamicznie wypełnia moją klasę UL przy użyciu funkcji INNERHTML, ale wyjście jest takie samo jak dostarczone dane z manekiny.

Nie jestem w stanie zrozumieć, dlaczego mój znacznik listy nie działa. Próbowałem rozwiązać go za pomocą innych odpowiedzi na tej stronie, sprawdzając indeks z i absolutną i względną pozycję tagu A i Li.

1
Ayush Aggarwal 27 czerwiec 2017, 09:38

3 odpowiedzi

Najlepsza odpowiedź

Powodem jest to, że na click, traci input traci swój :focus (jak wskazano przez shaochuancs ), a treść jest ukryta przed kliknięciem Kotwicy zarejestrowany. Wydarzenie click składa się z mousedown i mouseup. Utrata ostrości jest wyzwalana na mousedown w dowolnym miejscu na stronie. Po prostu zapobiec utracie :focus na mousedown na znacznikach kotwicy. Reszta kodu funkcjonuje zgodnie z oczekiwaniami, ponieważ kliknięcie znacznika kotwicy jest wyzwalane na mouseup.

Więc problem może zostać rozwiązany z jakimś podstawowym javascript / jQuery, po prostu preventDefault() na mousedown na tagach kotwicy.

$("a").mousedown(function(ev) {
  ev.preventDefault();
}

Należy pamiętać, że w tym fragmencie kodu łącze nie ładuje się, ponieważ jest zablokowany przez ramkę. Ale możesz zobaczyć w konsoli, że link jest klikany.

$("a").mousedown(function(ev) {
  ev.preventDefault();
  console.log($(this).attr("href"));
  console.log("Click triggered");
});
/* * Copyright (c) 2012 Thibaut Courouble
 * Licensed under the MIT License
   ================================================== */

body {
  background: #f7f7f7;
  color: #404040;
  font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 20px;
}

a {
  color: #1e7ad3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline
}

.container,
.main {
  width: 640px;
  margin-left: auto;
  margin-right: auto;
  height: 300px;
}

.main {
  margin-top: 50px
}

input {
  font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #555860;
}

.search {
  position: relative;
  margin: 0 auto;
  width: 300px;
}

.search input {
  height: 26px;
  width: 100%;
  padding: 0 12px 0 25px;
  border-width: 1px;
  border-style: solid;
  border-color: #a8acbc #babdcc #c0c3d2;
  border-radius: 13px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
  -moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
  -ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
  -o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
  box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}

.search input:focus {
  outline: none;
  border-color: #66b1ee;
  -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
  -moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
  -ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
  -o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
  box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}

.search input:focus+.results {
  display: block
}

.search .results {
  display: none;
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  z-index: 10000;
  padding: 0;
  margin: 0;
  border-width: 1px;
  border-style: solid;
  border-color: #cbcfe2 #c8cee7 #c4c7d7;
  border-radius: 3px;
  background-color: #fdfdfd;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
  background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
  background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
  background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
  background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
  background-image: linear-gradient(top, #fdfdfd, #eceef4);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.search .results li {
  display: block
}

.search .results li:first-child {
  margin-top: -1px
}

.search .results li:first-child:before,
.search .results li:first-child:after {
  display: block;
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  margin-left: -5px;
  border: 5px outset transparent;
}

.search .results li:first-child:before {
  border-bottom: 5px solid #c4c7d7;
  top: -11px;
}

.search .results li:first-child:after {
  border-bottom: 5px solid #fdfdfd;
  top: -10px;
}

.search .results li:first-child:hover:before,
.search .results li:first-child:hover:after {
  display: none
}

.search .results li:last-child {
  margin-bottom: -1px
}

.search .results li a {
  display: block;
  position: relative;
  margin: 0 -1px;
  padding: 6px 40px 6px 10px;
  color: #808394;
  font-weight: 500;
  text-shadow: 0 1px #fff;
  border: 1px solid transparent;
  border-radius: 3px;
}

.search .results li a span {
  font-weight: 200
}

.search .results li a:before {
  content: '';
  width: 18px;
  height: 18px;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -9px;
}

.search .results li a:hover {
  text-decoration: none;
  color: #fff;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  border-color: #2380dd #2179d5 #1a60aa;
  background-color: #338cdf;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
  background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
  background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
  background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
  background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
  background-image: linear-gradient(top, #59aaf4, #338cdf);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
  -ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
  -o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}

:-moz-placeholder {
  color: #a7aabc;
  font-weight: 200;
}

::-webkit-input-placeholder {
  color: #a7aabc;
  font-weight: 200;
}

.search li {
  padding: 0px;
}

.search li a {
  margin: 0px;
  display: block;
  width: 100%;
  height: 100%;
}

.lt-ie9 .search input {
  line-height: 26px
}


/*adding effect when the mouse is hovered over list item*/


/*adding effect when the mouse is hovered over list item*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Input Autocomplete Suggestions Demo</title>
<link rel="shortcut icon" href="http://designshack.net/favicon.ico">
<link rel="icon" href="http://designshack.net/favicon.ico">

<body>
  <section class="main">
    <form class="search" action="">
      <input type="search" id="searchit" placeholder="search.." />
      <ul class="results" id="searchlist">
        <li><a href="https://www.google.com">Tag A</a></li>
        <li><a href="https://www.facebook.com">Tag B</a></li>
      </ul>
    </form>
  </section>
</body>
3
Rithwik 27 czerwiec 2017, 09:54

Istnieje również kolejna możliwość. Jeśli ustawisz dekorację kotwicy, i zmienisz tło Li na Undering Link Achor działa tylko wtedy, gdy unosisz się na tekście kotwicy, ale chcesz, aby kotwica aktywuje na całej powierzchni Li , ale jak możesz sprawić, że praca to kolejna rzecz.

0
Herman Van Der Blom 2 kwiecień 2020, 12:57

Przyczynę główną jest: Po kliknięciu znacznika kotwicy, .search input stracisz swój status {x1}}, który sprawia, że .search input:focus + .results { display: block } wyłączona i .search .results 's display jako display jako display jako display jako display }} Ponownie - jak znacznik <a> nie istnieje na stronie, nic się nie dzieje. Nie ma nic wspólnego z ul lub li.

Oto uproszczony przykład: https://jsfiddle.net/cshao/rtonlr4z/, { {X0}} nie działa jak w pytaniu.

3
shaochuancs 27 czerwiec 2017, 06:54