Livesearch与jquery一样自动完成

Question

我有jquery实时搜索，当我输入内容时，我看到了结果，但是当我点击结果时，我希望在输入中看到值...并且在我点击输入结果后必须是- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window { if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) { if ([self.window.rootViewController.presentedViewController isKindOfClass: [AVPlayerViewController class]]) return self.window.rootViewController.presentedViewController.isBeingDismissed ? UIInterfaceOrientationMaskPortrait : UIInterfaceOrientationMaskAll; else return UIInterfaceOrientationMaskPortrait; } else { return UIInterfaceOrientationMaskAll; } } 但是像自动完成一样我尝试了一些但我无法应用它。

我不使用自动完成插件，因为我必须在结果中显示图像。

display:none;

$(document).ready(function() {
  $("#srehberText").keyup(function() {

    // Retrieve the input field text and reset the count to zero
    var filter = $(this).val(),
      count = 0;
    if (!filter) {
      $(".commentlist li").fadeOut();
      return;
    }

    var regex = new RegExp(filter, "i");
    // Loop through the comment list
    $(".commentlist li").each(function() {

      // If the list item does not contain the text phrase fade it out
      if ($(this).text().search(regex) < 0) {
        $(this).hide();

        // Show the list item if the phrase matches and increase the count by 1
      } else {
        $(this).fadeIn();
        count++;
      }
    });


  });
});

ol {
  list-style-type: none;
  padding: 0;
  width: 600px;
}

input {
  width: 600px;
  padding: 12px;
  border: 1px solid #ccc;
  color: #999;
}

li {
  display: none;
}

li img {
  margin-right: 5px;
}

li a {
  display: block;
  text-decoration: none;
  color: #666;
  font: 16px tahoma;
  padding: 4px;
}

li a:hover {
  background: #fffff0;
  color: #333;
}

Answer 1

试试这些，我根据你的代码为你做了两个选择。我希望他们帮助你达到你想要的目标。

单选：

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#srehberText").keyup(function() {

    // Retrieve the input field text and reset the count to zero
    var filter = $(this).val(),
      count = 0;
    if (!filter) {
      $(".commentlist li").fadeOut();
      return;
    }

    var regex = new RegExp(filter, "i");
    // Loop through the comment list
    $(".commentlist li").each(function() {

      // If the list item does not contain the text phrase fade it out
      if ($(this).text().search(regex) < 0) {
        $(this).hide();

        // Show the list item if the phrase matches and increase the count by 1
      } else {
        $(this).fadeIn();
        count++;
      }
    });


  });
});

$('.commentlist li a').click(function(){
  $('.commentlist').fadeOut();
  $("#srehberText").val($(this).text())
})

＆＃13;

ol {
  list-style-type: none;
  padding: 0;
  width: 600px;
}

input {
  width: 600px;
  padding: 12px;
  border: 1px solid #ccc;
  color: #999;
}

li {
  display: none;
}

li img {
  margin-right: 5px;
}

li a {
  display: block;
  text-decoration: none;
  color: #666;
  font: 16px tahoma;
  padding: 4px;
}

li a:hover {
  background: #fffff0;
  color: #333;
}

＆＃13;

<input type="text" class="text-input" id="srehberText" placeholder="Bölgeyi yazmaya başla" />
<ol class="commentlist">
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Germany</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Russia</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Turkey</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">England</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Netherlands</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">ABD</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Korea</a>
  </li>
</ol>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

多选：

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#srehberText").keyup(function() {
    // Retrieve the input field text and reset the count to zero
    var filter = $(this).val(),
      count = 0;
    if (!filter) {
      $(".commentlist li").fadeOut();
      return;
    }

    var regex = new RegExp(filter, "i");
    // Loop through the comment list
    $(".commentlist li").each(function() {

      // If the list item does not contain the text phrase fade it out
      if ($(this).text().search(regex) < 0) {
        $(this).hide();

        // Show the list item if the phrase matches and increase the count by 1
      } else {
        $(this).fadeIn();
        count++;
      }
    });


  });
});
var clicked = false;
$('.commentlist li a').click(function() {
  var val = $("#srehberText").val();
  if (!clicked) {
    val = "";
    clicked = true;
    $("#srehberText").val($(this).text())
  } else {
    $("#srehberText").val(val + " " + $(this).text())
  }

})

$(document).click(function(event) {
  if (!$(event.target).closest('.commentlist, #srehberText').length) {
    if ($('.commentlist').is(":visible")) {
      $('.commentlist').hide();
    }
  }
})

＆＃13;

ol {
  list-style-type: none;
  padding: 0;
  width: 600px;
}

input {
  width: 600px;
  padding: 12px;
  border: 1px solid #ccc;
  color: #999;
}

li {
  display: none;
}

li img {
  margin-right: 5px;
}

li a {
  display: block;
  text-decoration: none;
  color: #666;
  font: 16px tahoma;
  padding: 4px;
}

li a:hover {
  background: #fffff0;
  color: #333;
}

＆＃13;

<input type="text" class="text-input" id="srehberText" placeholder="Bölgeyi yazmaya başla" />
<ol class="commentlist">
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Germany</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Russia</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Turkey</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">England</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Netherlands</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">ABD</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Korea</a>
  </li>
</ol>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

以下代码会检查您点击的位置，如果它不是.commentlist, #srehberText，则会隐藏ol

$(document).click(function(event) {
  if (!$(event.target).closest('.commentlist, #srehberText').length) {
    if ($('.commentlist').is(":visible")) {
      $('.commentlist').hide();
    }
  }
})

Answer 2

$(document).ready(function() {
  $(".commentlist li").click(function(){
     $("#srehberText").val($(this).text());
     // you have input box. that is why only text is inputed in side.
     // you will need to place small image control beside input to show image
  });
  $("#srehberText").keyup(function() {

    // Retrieve the input field text and reset the count to zero
    var filter = $(this).val(),
      count = 0;
    if (!filter) {
      $(".commentlist li").fadeOut();
      return;
    }

    var regex = new RegExp(filter, "i");
    // Loop through the comment list
    $(".commentlist li").each(function() {

      // If the list item does not contain the text phrase fade it out
      if ($(this).text().search(regex) < 0) {
        $(this).hide();

        // Show the list item if the phrase matches and increase the count by 1
      } else {
        $(this).fadeIn();
        count++;
      }
    });


  });
});

ol {
  list-style-type: none;
  padding: 0;
  width: 600px;
}

input {
  width: 600px;
  padding: 12px;
  border: 1px solid #ccc;
  color: #999;
}

li {
  display: none;
}

li img {
  margin-right: 5px;
}

li a {
  display: block;
  text-decoration: none;
  color: #666;
  font: 16px tahoma;
  padding: 4px;
}

li a:hover {
  background: #fffff0;
  color: #333;
}

<input type="text" class="text-input" id="srehberText" placeholder="Bölgeyi yazmaya başla" />
<ol class="commentlist">
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Germany</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Russia</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Turkey</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">England</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Netherlands</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">ABD</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Korea</a>
  </li>
</ol>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Answer 3

希望这样做。

$(document).ready(function() {
  $("#srehberText").keyup(function() {

    // Retrieve the input field text and reset the count to zero
    var filter = $(this).val(),
      count = 0;
    if (!filter) {
      $(".commentlist li").fadeOut();
      return;
    }

    var regex = new RegExp(filter, "i");
    // Loop through the comment list
    $(".commentlist li").each(function() {

      // If the list item does not contain the text phrase fade it out
      if ($(this).text().search(regex) < 0) {
        $(this).hide();

        // Show the list item if the phrase matches and increase the count by 1
      } else {
        $(this).fadeIn();
        count++;
      }
    });


  });
  $(".commentlist li a").click(function() {
    var val = $(this).text();
    $("#srehberText").val(val);
    $('.commentlist li').fadeOut();
  });
});

ol {
  list-style-type: none;
  padding: 0;
  width: 600px;
}

input {
  width: 600px;
  padding: 12px;
  border: 1px solid #ccc;
  color: #999;
}

li {
  display: none;
}

li img {
  margin-right: 5px;
}

li a {
  display: block;
  text-decoration: none;
  color: #666;
  font: 16px tahoma;
  padding: 4px;
}

li a:hover {
  background: #fffff0;
  color: #333;
}

<input type="text" class="text-input" id="srehberText" placeholder="Bölgeyi yazmaya başla" />
<ol class="commentlist">
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Germany</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Russia</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Turkey</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">England</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Netherlands</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">ABD</a>
  </li>
  <li>
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Korea</a>
  </li>
</ol>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Answer 4

您还可以使用select检查here

Answer 5

在点击其他地方时使列表不可见：

<input type="text" onblur="listHide()">

<script>
var molist = false; //mouse-over list
// make events mouseover and mouse leve to change molist value

function listHide() {
    if (molist = false) { //hide list}
}
</script>