[RESOLVED]autosearch text box using jquery like windows 8 search textbox

hi

i want to create auto search text box like windows 8 operating system autos earch textbox

i have one array,word will be searched from that.

Hi,

Try Following

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Auto Search Example</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
      $(function () {
          var availableSearchWordArray = [
            "AItem",
            "BItem",
            "AAItem",
            "BBITem",
            "CItem",
            "CCItem",
            "DItem",
            "DDItem",
          ];
          $("#words").autocomplete({
              source: availableSearchWordArray
          });
      });
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="words">Search: </label>
  <input id="words">
</div>
</body>
</html>

Regards,

Ajay

thanks for your reply

but i want like below see the image.

(ie) value automatically displayed in textbox.

Hi Ananth.G,

If you want to input the value ,the it will auto complete result with image,you need to get the image url for the specfic elements.

Here are some tutorials for how to add image in jquery auto complete:

http://www.aspdotnet-suresh.com/2012/02/jquery-display-auto-complete-search.html

http://www.aspsnippets.com/Articles/Render-images-in-autocomplete-list-of-ASP.Net-AJAX-AutoCompleteExtender.aspx

Here is a similar issue ,which can give you right direction:

http://forums.asp.net/t/2001922.aspx?How+to+add+an+image+in+jQuery+AutoComplete+

Best Regards,
Kevin Shen.

Hi Ananth,

I came up with this solution, please try and let me know if any changes can be done:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>autocomplete demo</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

</head>
<body>
    <label for="autocomplete">Select a programming language: </label>
    <input id="autocomplete" class="test">




    <script>
        $("#autocomplete").autocomplete({
            source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
        });
        $("#autocomplete").on("autocompleteresponse",
            function (event, ui) {
             
                document.getElementById('autocomplete').value = (ui.content[0].value);
                $('.test').on('focus',function (event) {
                    var inp = this;
                    var t = self.setTimeout(function () { inp.select();}, 1);
                });
                
            });

    </script>
</body>
</html>

Hope it helps.

Leave a Reply