seo Question posted in
Some basic information to get you started with this can be found here.

Livesearch with jquery like autocomplete – SEO

I have jquery live search and when I type something I see result but when I clicked result I want to see value in my input..and after I clicked out of the input result must be display:none; but like autocomplete I tried something but I couldn’t apply it.

I don’t use autocomplete plugin because I must show image in my result.

$(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;
}
<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>
Tags:

5

Answers


  1. 0

    Try these, I made 2 options for you to try based on your code. I hope they help you achieve what you want.

    Single select:

    $(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())
})
    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>

    Multi select:

    $(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();
    }
  }
})
    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>

    The code below checks where you click and if it’s not .commentlist, #srehberText then it will hide the ol

    $(document).click(function(event) {
  if (!$(event.target).closest('.commentlist, #srehberText').length) {
    if ($('.commentlist').is(":visible")) {
      $('.commentlist').hide();
    }
  }
})
    Login or Signup to reply.
  2. 0 
    $(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>
    Login or Signup to reply.
  3. 0

    Hope this would do.

    $(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>
    Login or Signup to reply.
  4. 0

    to make list invisible on clicking somewhere else:

    <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>
    Login or Signup to reply.
  5. 0

    you can also use select check it here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search