SitePoint Sponsor

User Tag List

Results 1 to 1 of 1

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add propieties to an autocomplete dropbox

    I am a really beginner and I've found different threads that talk about proprieties of an autocomplete dropbox. However, when I want to add them all, I am not able to do it.

    The first problem I have is that I am doing my webpage with wix... and when I want the autocomplete to redirect to a page it just rediects in the box where the html is.... any solution. I would also like to add a limit numer of displays to the dropbox.

    Thank you in advance and here you have the html that I already have (copied):

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>jQuery UI Autocomplete Testt</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script>
    	$(document).ready(function() {
    		var data = [
    			{label: 'Google', value: 'http://google.com'},
    			{label: 'Yahoo', value: 'http://yahoo.com'},
    			{label: 'BMW', value: 'http://bmw.com'},
    			{label: 'Bing', value: 'http://bing.com'}
    		];
     
        	$("input#autocomplete").autocomplete({
    			source: data,
    			focus: function (event, ui) {
    				$(event.target).val(ui.item.label);
    				return false;
    			},
    			select: function (event, ui) {
    				$(event.target).val(ui.item.label);
    				window.location = ui.item.value;
    				return false;
    			}
    		});
      	});
      </script>
    </head>
    <body>
    <input id="autocomplete" />
    </body>
    </html>
    Last edited by Mittineague; Sep 29, 2013 at 15:30.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •