Solved

Auto Complete Using JQuery

Posted on 2014-02-27
5
95 Views
Last Modified: 2016-05-18
Need sample Java Script for implementing auto complete of a text box using Ajax ( Using JQuery)

can you let me know the JQuery script files that need to be included and a simple page that works by calling a URL and displays the options while we enter text into a textbox.
0
Comment
Question by:dhuma
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39893530
If you use jquery ui, it is well documented.  http://jqueryui.com/autocomplete/
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Remote datasource</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-autocomplete-loading {
    background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
  }
  </style>
  <script>
  $(function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }
 
    $( "#birds" ).autocomplete({
      source: "search.php",
      minLength: 2,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.value + " aka " + ui.item.id :
          "Nothing selected, input was " + this.value );
      }
    });
  });
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds">
</div>
 
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
 
 
</body>
</html>

Open in new window

What have you tried so far and what is not worked?
0
 

Author Comment

by:dhuma
ID: 39895248
I am not able to make the above code working even with a valid URL that fetches the data for suggestions. Not sure where the code is breaking. where can we put some alert boxes to debug this.

also , will the above code make the ajax call implicilty to the URL specified? is Angular JS better to implement the auto complete,.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39895290
Please post a link to your sample you are working with.  If you you are working locally, then create a sample page you can post. Otherwise we are just guessing.
0
 

Author Comment

by:dhuma
ID: 39895520
I am running the same code you posted as is , except for the URL which is pointing to a web server on my local machine. Where can put the alert box in the code below to debug.

$( "#birds" ).autocomplete({
      source: "search.php",
      minLength: 2,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.value + " aka " + ui.item.id :
          "Nothing selected, input was " + this.value );
      }
    });
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
printf performancy 11 101
How to configure empty element in XML Document parser? 15 58
Tagging and Merging on Branch 1 68
How to log java errors in tomcat 8 37
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL several years ago, it seemed like now was a good time to update it for object-oriented PHP.  This article does that, replacing as much as possible the pr…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This theoretical tutorial explains exceptions, reasons for exceptions, different categories of exception and exception hierarchy.
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

737 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question