asked on

Simple Cutdown Autocomplete

Im trying to get Autocomplete working, and so made it as simple as possible, but it still doestnt work :-S

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title></title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
  <style type="text/css">
  </style>
  <script>

  $(function() {
    var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby",  "Scala", "Scheme"];
    $("#txtTest").autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>
  <input id="txtTest" name=""><div>hi</div></input>
</body>
</html>

Open in new window

What am I doing wrong?

ASKER CERTIFIED SOLUTION

leakim971

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

tonelm54

ASKER

Wopps, so I tidied up my input tag, but the code still doesn't work:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title></title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
  <style type="text/css">
  </style>
  <script>

  $(function() {
    var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby",  "Scala", "Scheme"];
    $("#txtTest").autocomplete({
      source: availableTags
    });
  });
  </script>


</head>

<body>
  <input id="txtTest" name="" />
</body>
</html>

Open in new window

I cannot really see any differences between jsfiddle and my code apart from a CSS style sheet, which I wanted to avoid to style it myself later.

Any ideas?

leakim971

yes, the stylesheet (css) file
add it to confirm

tonelm54

ASKER

So just encase anyone else is looking:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
  <style type="text/css">
	.ui-autocomplete { position: absolute; cursor: default; border:1px;
	    max-height: 100px;    overflow-y: auto;    /* prevent horizontal scrollbar */    overflow-x: hidden;}        
	.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }  
	/* workarounds */ 
	* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */   
  </style>
  <script>

  $(function() {
    var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby",  "Scala", "Scheme"];
    $("#txtTest").autocomplete({
		autoFocus:true,
		source: availableTags,
		messages: {
			noResults: null,
			results: function() {}
		}
    });
  });
  </script>


</head>

<body>
  <input id="txtTest" name="" />
</body>
</html>

Open in new window