JQuery UI – Autocomplete plugin. Connecting jQuery UI Remote connecting jQuery UI

Installing the jQuery UI library

Downloading and installing the jQuery UI library is in some ways more difficult than other JavaScript libraries. This process is not exactly labor-intensive, but it requires explanation, which is what this article is devoted to. To work through the examples, you'll only need to install the development version of the library, but the following also describes how to install minified files aimed at production deployment and how to use jQuery UI over content distribution networks (CDNs).

Getting the jQuery UI library

The jQuery UI library loading process is a bit more complex than other JavaScript libraries, but the results will be worth the effort. The jQuery UI library covers five areas of functionality, and you are given the opportunity to configure the boot archive yourself, including only the necessary components. This part will introduce you to all the features of the jQuery UI library, but when working with real web applications, you can eliminate unnecessary components to reduce the size of the library loaded by browsers.

Selecting a theme

Before you start creating your own jQuery UI library, you must choose a theme. The jQuery UI library offers a wealth of options and configuration options, making it easy to change the appearance of any tool you use. In fact, the number of choices available is so large that it is sometimes truly overwhelming.

On the jQuery UI website, you can use the services of a special application - a theme customizer (Themeroller), but in addition there is a whole gallery of predefined themes, completely ready for use, from which you can choose the one that suits you best, and thereby make your life easier.

Start by visiting jqueryui.com and click on the Themes button. This will open the ThemeRoller page, displaying jQuery UI widgets and a settings panel to the left of them, with which you can set the theme options, as shown in the figure:

If you already have a specific visual style that you need to adhere to, and you want the visual interface of the JQuery UI tools to be consistent with the rest of the site or application, then the Roll Your Own tab (which is selected by default) is just that. need to. You can change any aspect of the design using the CSS style set used by the jQuery UI library.

To get one of the ready-made themes, go to the Gallery tab. At the time of writing, the gallery includes 24 themes, covering a wide range of color options - from muted and subtle tones to bright and provocative ones. As you click on gallery themes, the appearance of the widgets displayed on the rest of the page will update accordingly, giving you a taste of what the application might look like:

The default theme used for jQuery UI is called UI lightness, but this theme doesn't have enough contrast, so I'll use the Sunny theme, which looks a little better. The only thing that is required of you now is to remember the name of the topic that suits you.

Creating a custom jQuery UI library download archive

Once you've chosen a theme, you can start creating your own jQuery UI library download. Click the Download button at the top of the page to go to the Download Builder page. You'll see a list of jQuery UI components divided into four functional groups: UI Core, Interactions, Widgets, and Effects.

By choosing only the features that your project actually needs, you will reduce the size of the set of files that browsers have to download. This in itself is not a bad idea, but I take a different approach. From my point of view, it is much better to save some of your communication bandwidth and offload the task of delivering jQuery UI to browsers to one of the content distribution networks, which will be discussed later.

You will need all the components to run the examples, so make sure all the boxes are checked.

There are dependencies between some of the components in the list, but you may not think about this as you create your own version of the library. If you select a component, all the components on which it depends will be loaded at the same time.

The next step is to choose a topic. This is done using the drop-down list located at the bottom of the page, as shown in the figure:

You also have the option to select a specific version of the jQuery UI library to be included in the download archive. You will need to download the Stable version, which works with all versions of the jQuery library starting from version 1.3.2.

After selecting all the components and selecting the theme and stable version, download the custom jQuery UI library download archive you created by clicking the Download button.

Installing the development version of the jQuery UI library

The jQuery UI download contains all the files needed to use the library in both development and production. To work with the examples, you will need files that contain uncompressed source code and are intended for use during development. If you encounter any problems, you can easily examine the code to familiarize yourself with the internals of the jQuery UI library, which will be invaluable in debugging your scripts.

You should copy the following files and folders to the example files folder:

development-bundle\ui\jquery-ui.custom.js;

development-bundle\themes\sunny\jquery-ui.css;

folder development-bundle\themes\sunny\images.

The JavaScript and CSS file names include the version number of the downloaded library release. In my case this is version 1.10.3. The jQuery UI library is under active development and you may be able to download a later version than 1.10.3.

Connecting the jQuery UI library to an HTML document

All you have to do now is include the jQuery UI library in your HTML document. You can do this by adding script and link elements to your document containing links to the JavaScript and CSS files you uploaded, as shown in the example below:

jQuery library

It is not necessary to link directly to the images folder. As long as the images folder and the CSS file are in place, jQuery UI will be able to independently find all the necessary resources.

The jQuery UI library depends on the jQuery library. In order to use jQuery UI in a document, it must first be connected to it. The jQuery UI library is not a standalone library.

The document shown in the example above contains a simple test to verify that the jQuery UI library is included correctly. If the page opens normally, you should see a button similar to the one shown in the figure. Ignore the call to the button() method on the script element for now. You will learn about what it is intended for and how it works in the next article.

If you misspell the path to either of the two libraries, you will see a simple link instead.

Installing jQuery UI library for production environment

Once you've finished developing your web application and are ready to deploy it, you can use minified versions of the files included in the download archive. These files are smaller in size, but their contents will not be easy to read if needed for debugging purposes. To use the deployment versions of the files, copy the following files and folders to your web server directory:

jquery-ui-1.10.3.custom.min;

jquery-ui-1.10.3.custom.min

folder css\sunny\images

The images folder and CSS file here are the same as in the development version; changes can only affect the JavaScript file. To perform a clean installation, simply copy these files to the server directory.

Using the jQuery UI library through a content distribution network

The issue of using a CDN to load the jQuery library has already been touched upon previously. If you are a fan of this approach, then you will be pleased to know that you can do the same thing with the jQuery UI library. Both Google and Microsoft provide hosting of jQuery UI files on their CDNs. For our basic example, I'm using Microsoft's service because it provides both jQuery UI JavaScript files and standard skins.

To use a CDN, you must have the URLs of the files you need. If this is a Microsoft service, go to the Microsoft Ajax Content Delivery Network page. As you scroll down the page, you'll see a list of links corresponding to different versions of jQuery UI. Click on the link for the version you are using (in my case it is version 1.10.3). You'll see URLs for the regular and minified versions of the jQuery UI library file.

The rest of the page displays pre-made themes, with a CSS file URL underneath each theme.

To connect these files to your document via a CDN, simply place the script and link elements in the corresponding URLs rather than links to local jQuery UI files, as shown in the example below:

jQuery library $(function() ( $("a").button(); )); Visit the website www.professorweb.ru

Again, a sign that the URLs are specified correctly will be the display of a button on the page that opens, similar to the one shown in the figure above.

The jQuery UI (User Interface) library is a set of template elements for creating a user interface and is part of the jQuery library. User interface refers to the interaction between the user and the web page.

The main goal of the jQuery UI library is to make life easier for web developers so that they do not waste time on performing the same type of tasks. The most commonly found JavaScript scripts on websites have been collected into one library, and developers just need to take and apply the necessary parameters and methods. Developing user interfaces has become much faster.

Calendars, sliders, and pop-ups used on websites have already become a mandatory attribute. So why does a developer need to write code from scratch every time? When he can customize a ready-made template and use it on his website.

Connecting jQuery UI

Official website: https://jqueryui.com/

The jQuery UI library can be downloaded to your computer or connected via a CDN link.

Connection via CDN

You have two options for downloading the library.

Custom Download

You definitely don't need to download the entire library if you are only going to use some individual components. On the Download Builder page, you uncheck all the boxes except the components you need. For example, if you only need the accordion widget, then put a tick in the checkbox next to it and the site will tell you what elements will be needed for work. The checkboxes will be placed automatically where necessary and you will not download unnecessary files, which will have a positive effect on the site loading speed.

Before clicking the download button, choose a suitable theme for a beautiful design of the components. You can look at the visual design of ready-made themes in the Theme/Gallery section.

To embed components already into a stylized website, the theme designer is more suitable for you - ThemeRoller, go to the Theme section. When you change the appearance control panel, you will immediately see what all widgets look like. After you finish creating the appearance of the element, click on the download button and download only the selected elements and theme, which is very convenient.

Full download - Quick Download

The situation where you need the entire library is unlikely, unless you look at the source code. To download the full latest version, click on the button: Stable.

The downloaded library is connected in the same way as via CDN, with the only difference being that the URLs of the links will lead to the folder where you put these files on your hosting.

In the Demos section you can clearly see which tasks (demo examples) on the site can be solved using the library.

Let's look at the example of a widget - Tooltip. The purpose of this widget is to beautifully open the tooltip specified in the title attribute.

We create the HTML structure as usual. In paragraph p we place an input field for your age - input . In the text field we specify the title attribute with text "Please indicate your age". We will apply the tooltip widget to this element.

Your age:

After loading the DOM tree, on the document object we will call the tooltip method. We access the entire page (document) at once so that this method can be applied to other page elements. After calling the tooltip method, the title attribute values will be displayed in a tooltip.

From the author: Greetings, friends. In this article, we will begin to get acquainted with the jQuery UI library, which allows you to implement many interesting ready-made solutions on your website: calendar, accordion, live search, beautiful animation effects and much more. In this article we will learn how to download and connect the jQuery UI library.

So why do we need the jQuery UI library? Actually, then, why do we turn to third-party plugins - to install and use ready-made solutions on the site. But the jQuery UI library is a comprehensive solution, i.e. here you will find not just one thing, but a whole package of widgets, effects and plugins for working with various events.

You can download the entire package or select one or more widgets. Also included in the jQuery UI library are two dozen themes for almost every taste. This is also a significant plus.

Let's move from words to action: download and install the jQuery UI library. Let's go to the official website and turn to the Download section. This is where we can select the components to download and the theme.

JavaScript. Fast start

Learn the basics of JavaScript with a hands-on example of how to create a web application.

You can select a topic from the drop-down list at the bottom of the page.

Also, if you wish, you can design your own theme with your own design; to do this, just click on the design a custom theme link, which is located immediately above the drop-down list. On the page that opens, we can change fonts, colors and other design of elements, observing the changes online, in general, we can design our own theme.

But let's go back to the previous page and download all the components of the jQuery UI library with the Base theme.

In the resulting archive we will need a style file (jquery-ui.css) and a script file (jquery-ui.js). Both files are offered in regular and compressed versions, so you can choose either one. Well, of course, you will need the jQuery library, I will connect version 1.11.3 from the Google service.

As a result, the page with all connections will look like this:

< link rel = "stylesheet" href = "ui/jquery-ui.css" >

jQuery UI is a jQuery-based library that implements more than 20 plugins, including plugins that organize various behaviors (for example, dragging or stretching elements), eight types of widgets (such as a calendar, dialog boxes, a tab system, etc.) and animation effects. In addition, the UI has several design themes with which widgets are designed and which contain a set of useful icons (173 pieces). Any of the design themes can be adjusted directly on the jQuery UI website, immediately before loading.

Let's get started

jQuery UI has five behavior plugins, some of the capabilities of which are presented below:

Each of the features presented above is organized into a few lines of code.

The UI also provides eight plugins that organize widgets:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / ~gt~ ~lt~script src="http://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~ ~lt~script src="/ui/jqueryui .custom.js"~gt~~lt~/script~gt~ ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~ ~lt ~style~gt~ body(font:9pt Arial,sans-serif;) p.titl(clear:both; margin:0; padding:5px 0 5px 7px; font-style:italic) .itLf(float:left; width :280px; height:200px;) .itRg(float:left; margin-left:70px; height:200px; width:200px;) #accordion(font-size:8pt; margin-bottom:25px) #tabs(font- size:8pt; margin-bottom:25px) #opnDialog(font-size:8pt; margin-bottom:25px) #progressbar(font-size:8pt;) button(font-size:8pt;) #radio(font-size :8pt; margin-bottom:25px) #autocomplete(margin-bottom:25px) #slider(margin-bottom:25px) #datepicker(font-size:8pt;) ~lt~/style~gt~ ~lt~/head ~gt~ ~lt~body~gt~ ~lt~div class="itLf"~gt~ ~lt~p class="titl"~gt~Accordion~lt~/p~gt~ ~lt~div id=" accordion"~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Section 1~lt~/a~gt~~lt~/h3~gt~ ~lt~div~gt~ ~ lt~p~gt~ ~lt~i~gt~Glasgow~lt~/i~gt~ is the largest city in Scotland and the third most populous in the UK. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Section 2~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Ice cream wars in Glasgow~lt~/i~gt~ - a series of conflicts in the Scottish city of Glasgow between rival drug dealers delivering their goods in ice cream vans. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Section 3~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Millwall Brick~lt~/i~gt~ - an improvised weapon of football hooligans, made from rolled up newspaper and clamped in a fist like a lead. . ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Section 4~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~img src="http://tinyurl.com/3sn6e3t"~gt~ ~lt~/p~gt~ ~lt~/div ~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Tabs~lt~/p~gt~ ~lt~div id="tabs"~gt~ ~lt~ul~gt ~ ~lt~li~gt~~lt~a href="#tabs-1"~gt~Nunc tincidunt~lt~/a~gt~~lt~/li~gt~ ~lt~li~gt~~lt ~a href="#tabs-2"~gt~Proin dolor~lt~/a~gt~~lt~/li~gt~ ~lt~/ul~gt~ ~lt~div id="tabs-1" ~gt~ ~lt~p~gt~ Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~div id="tabs-2"~gt~ ~lt~p~gt~ Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante , ut pharetra massa metus id nunc. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Dialog box~lt~/p~gt~ ~lt~a id="opnDialog" href="javascript:$("#dialog").dialog("open");"~gt~Open window~lt~/a~gt~ ~lt~div id="dialog" title= "Simple window"~gt~ ~lt~p~gt~ This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the "x" icon. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Прогрессбар~lt~/p~gt~ ~lt~div id="progressbar"~gt~~lt~/div~gt~ ~lt~/div~gt~ ~lt~div class="itRg" style="height:150px"~gt~ ~lt~p class="titl"~gt~Кнопки~lt~/p~gt~ ~lt~button~gt~Обычная кнопка~lt~/button~gt~ ~lt~div id="radio" style="margin-top:15px"~gt~ ~lt~input type="radio" id="radio1" name="radio" /~gt~~lt~label for="radio1"~gt~1~lt~/label~gt~ ~lt~input type="radio" id="radio2" name="radio" checked="checked" /~gt~~lt~label for="radio2"~gt~2~lt~/label~gt~ ~lt~input type="radio" id="radio3" name="radio" /~gt~~lt~label for="radio3"~gt~3~lt~/label~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Автозаполнение~lt~/p~gt~ ~lt~input id="autocomplete" title="Enter English"a"" /~gt~ ~lt~p class="titl"~gt~Ползунок~lt~/p~gt~ ~lt~div id="slider"~gt~~lt~/div~gt~ ~lt~p class="titl"~gt~Календарь~lt~/p~gt~ ~lt~div id="datepicker"~gt~~lt~/div~gt~ ~lt~/div~gt~ ~lt~script~gt~ $("#accordion").accordion(); $("#tabs").tabs(); $("#dialog").dialog({ autoOpen:false }); $("#progressbar").progressbar({value: 37}); $("#opnDialog").button(); $("button").button(); $("#radio").buttonset(); var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $("#autocomplete").autocomplete({source: availableTags}); $("#slider").slider({ range: true, min: 0, max: 500, values: [ 75, 300 ] }); $("#datepicker").datepicker({source: availableTags}); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~ !}

In addition, jQuery UI's advanced styling system can be used to provide rounded corners or stylized areas, for example, for system warnings or error messages:

Usage

Before you start learning how to use individual plugins, it's important to know how the entire jQuery UI library works.

If you want to use a theme that you customize yourself, then first make all the necessary theme settings on this page, then click the "Download theme" button and you will find yourself on the library download page, where the theme you edited will be indicated in the Theme field.

After you have decided on the theme and required components, on the download page you need to click on Download, after which the archive will be downloaded to your computer. It will contain three folders:

css— contains design files (CSS file and images).
js— contains files with jQuery and jQuery UI.
development-bundle— this folder does not need to be uploaded to the site; all its contents are of an auxiliary nature. There are many different files with a demonstration of the plugin and other auxiliary files.

In addition to these three folders, at the root of the archive there is a file index.html, with a demonstration of the downloaded plugins (of course, there is no need to upload this file to the site).

Connecting UI to your site

For jQuery UI to work on the pages of your site, it is necessary that the js-file of the jQuery library, the js-file of jQuery UI (located in the js folder of the downloaded archive) and the contents of the css folder are connected to the page (it is important that all of it (the css content) is located on hosting in one directory):

< link type= "text/css" href= "css/themename/jquery-ui-1.8.12.custom.css" rel= "Stylesheet" /> < script type= "text/javascript" src= "js/jquery-1.4.4.min.js" > < script type= "text/javascript" src= "js/jquery-ui-1.8.12.custom.min.js" >

That's all! You can then use the jQuery UI features on your page. For example, using one line of javascript code to make a regular element draggable:

Working with plugins

All behavior and widget plugins operate in a similar way. Each jQuery UI plugin is represented by one main method that is called on the selected elements. Its name always matches the name of the plugin. Using this method, you can instantiate (install) a plugin on elements, find out and change plugin properties, install event handlers, and also run plugin functions, which are usually called methods (although they are not methods in the usual sense of this concept).

Instantiation (installation)

To install any plugin on page elements, just select the necessary elements using jQuery and then call the plugin method on them (the name of which always matches the name of the plugin):

Methods

Typically, a method of an object in javascript means a function called on this object as follows:

obj.A(); // call method A on object obj obj.B () ; // call method B on object obj

However, within the framework of working with specific jQuery UI plugins, methods are called this form of recording:

$("#someId" ) .plaginName ( "method name" , method parameters) ;

For example:

Properties

Each plugin has a number of properties (their descriptions can be found in the documentation of the corresponding plugins). Each property can be set at the time the plugin is instantiated. To do this, when installing the plugin on an element, you need to pass an object with properties in the format (property_name_1:value_1, property_name_2:value_2, ...):

// make a dialog box from the element with id=someId using // the dialog plugin and specify a title for the window $("#someId" ) .dialog (( title: "Message" ) ) ; // make the first div on the page a calendar using // the datepicker plugin, and specify the minimum and maximum date $("div:first") .datepicker (( minDate: new Date(2007, 1 - 1, 1) , maxDate: new Date(2013, 1 - 1, 1) ) ;

In addition, the value of any property can be found out or changed after the plugin has been instantiated. To do this you need to use the "option" method:

// find out the title of the dialog box var dialogTitle = $("#someId" ) .dialog ("option" , "title" ) ; // change the title by adding the prefix "#1 " $("#someId" ) .dialog ("option" , "title" , "#1 " + dialogTitle) // change the minimum date in the calendar // which is installed to the first div on the page $("div:first" ) .datepicker ("option" , "minDate" , new Date(2008 $("selector" ) .dialog (( close : function (event, ui) ( ... ) ) ) ;

Creating your own plugins

In addition to organizing many convenient and intuitive plugins, jQuery UI provides a means by which you can make similar plugins yourself - the UI Widget Factory. One of its big advantages is that it organizes some OOP capabilities that allow you to modify existing widgets and create your own widget hierarchies.

I haven’t written anything on the blog for a long time, and I finally took some time to talk about the Autocomplete widget, which was included in jQuery UI, an add-on for the jQuery JavaScript library.

The Autocomplete widget helps organize a list of matching values as the user fills out an input field.

First, let's visit the page on the jQuery UI website to get the files we need. We click on the Deselect all component link so as not to download unnecessary things, and then select only what we need - check the Autocomplete checkbox and see that the Core, Widget and Position checkboxes are checked along with it. The Autocomplete widget depends on these files to function.

In addition, there is a drop-down list on the right where you can select your favorite design theme. If everything is ready, click the Download button and get the archive. The widget's capabilities can be assessed on the developer's website. I’ll just try to explain in Russian and in as simple a language as possible how to make it all work.

So, first in the HEAD section you will need to connect several files that are in the archive.

First we included the widget styling file, then the jQuery library file. The third included file is needed to implement Autocomplete.

The Autocomplete widget does not require complex HTML markup. Just a text input field is enough, i.e. a regular input element that has a text value in its type attribute. Additional markup can be added to style it according to your chosen theme.

Tags:

First, let's look at the simplest case of using a widget - when local data is used to generate a list of tips.

An array with hints has been prepared in the availableTags variable. Then we selected the input element by its identifier and applied the autocomplete method, which was immediately passed an object with the settings. For now, this is an object with a single property, source , which specifies the source of the data. In our case, the availableTags array is specified.

In fact, we can customize the widget a little using other properties of the settings object. Here is a list of these properties:

source – the option has no default value and must be defined. The option value can be a string, array, or function. In any case, the data source must be specified in this option.
minLength - default value is 1. This option specifies the number of characters that must be entered in the input field before tooltips are activated. A value of 0 is useful when using local data for lists with multiple positions. This value should be increased when using requests to the server to obtain data and when using large lists, where one entered character can correspond to several thousand items.
delay – default value is 300. This option specifies the number of milliseconds that must pass after pressing the next key for the request to receive data to be activated. A value of zero makes sense when using local data. When using server queries, a zero value in this option can cause serious load.
appendTo – default value 'body'. The value of this option can be a jQuery selector. Determines which element the tooltip dropdown should be added to.
disabled – default value is false. If set to true, the Autocomplete widget functionality will not be available upon initialization, but can be enabled later, for example, when some condition is met.

$(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"]; $ ("#tags").autocomplete(( source: availableTags, select: function(event, ui) ( alert("Event: " + event.type + ",\nvalue: " + ui.item.value); ) ) ); ));

Here we added a select property, where we defined a function that will be called when the user selects a value from the list of tooltips. the function takes two arguments: the first is an event object, the second is a special ui object. By organizing access to the properties of these objects, you can get useful information (we display it in the warning window).

This is not the only event that the widget can respond to - here is a complete list of them, which shows the name of the property in the object with settings, the name of the event in event.type and the description of the event:

create – Event autocompletecreate occurs at the moment of initialization.
search – event autocompletesearch occurs before the request is executed. If the function defined in this option returns false, the request will not be sent.
open – event autocompleteopen occurs at the moment when the drop-down list of tips opens.
focus – event autocompletefocus occurs whenever one of the hint list items receives focus.
select - event autocompleteselect occurs when one of the hint list items is selected.
close – event autocompleteclose occurs when the list of hints is closed. The event occurs regardless of whether one of the items was selected or not.
change – event autocompletechange occurs after one of the list items is selected. The event always occurs after close.

The widget also has some methods with which you can further expand its functionality.

For example, add a couple of buttons to the HTML markup:

Search "as" Close Tags:

And here is the JS code:

$(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"]; $ ("#tags").autocomplete(( source: availableTags, minLength: 0 )); $("#search").click(function())( $("#tags").autocomplete("search", "as "); )); $("#close").click(function())( $("#tags").autocomplete("close"); )); ));

Now, by clicking the Search for "as" button, we can simulate the user's actions as if he had entered the characters "as" in the input element. By clicking on the Close button, we close the list of hints, if it was opened previously.

Below are descriptions of all available methods:

destroy – .autocomplete('destroy') completely removes all functionality of the Autocomplete widget. Returns elements to their pre-initialization state.
disable – .autocomplete(‘disable’) temporarily disables all widget functionality. You can enable it again using the enable method.
enable – .autocomplete('enable') allows the use of all widget functionality if it was previously disabled using the disable method.
option – .autocomplete('option', optionName, ) using this method you can set the value of any widget option after initialization.
option – .autocomplete('option', optionName) using this method you can get the value of any widget option after initialization.
widget – .autocomplete('widget') This method can be used to access an object that represents an element with Autocomplete functionality.
search – .autocomplete(’search, ‘) Using this method, you can open the entire list without passing the second parameter. If you pass a string of characters in the second parameter, a list with suitable hints will be opened.
close – .autocomplete(‘close’) closes the tooltip list if it was previously opened.

In general, now we know how to configure and manage the widget, but so far we have used exclusively local data to generate a list of tips. It’s suitable for exploring possibilities, but unlikely for real work. In real work, you will probably need to generate hints from data stored on your own server, and maybe not on your own at all

The source option, which, let me remind you, is mandatory and defines the data source, can also accept a line containing the url to which the request should be sent. And in source you can define your own function that will do what you need. This, perhaps the most flexible method, is what we will analyze. Let's try to get some data from the geonames.org server in the form of a list of hints

I will provide a fully working code and try to explain how and what works.

example-17-8-4 .ui-autocomplete-loading ( background: #FFF url("/instruction/2011/css/ui-lightness/images/ui-anim_basic_16x16.gif") right center no-repeat; ) #city ( width: 25em; ) #log ( height: 200px; width: 600px; overflow: auto; ) $(function() ( $("#city").autocomplete(( source: function(request,response) ( $. ajax(( url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", data: ( featureClass: "P", style: "full", maxRows: 12, name_startsWith: request.term ) , success: function(data) ( response($.map(data.geonames, function(item) ( return ( label: item.name + ", " + item.countryName, value: item.name + " (" + item .countryName + ")" + " [" + item.lat + ", " + item.lng + "]" ) ))); ) )); ), minLength: 3, select: function(event,ui) ( $("

").text(ui.item ? ui.item.value: "Nothing selected!").prependTo("#log"); $("#log").attr("scrollTop", 0); ) ) ); )); City:
Supported by geonames.org

First we look at the HTML markup. In the first div element, we are only interested in the input element with the id city . Here we will enter the initial letters (in Latin) of the locality about which we would like to receive information. We use the div element with the identifier log to enter the received information into it.

If we look at the JavaScript code, we will see that the settings object contains three properties - the required source property, as well as the minLength and select properties.
We will only consider the source property, where you can write your own function. This function takes two arguments. The first argument is request, an object containing a single property, term, which stores the string entered by the user in the input field. The second argument is response - a function with which the received response will be processed.

Inside the function defined in the source property, we have almost unlimited freedom of action. And therefore, without further ado, we write there an ajax request to the url http://ws.geonames.org/searchJSON, in the dataType option we indicate that we expect to receive data in JSON format in the response. In the data option, we define an object with request parameters that will be sent to the specified url ( why the parameters are exactly like this - you need to look at the API documentation on the geonames.org server). In the last parameter we pass request.term – what the user entered.

In the next option of the ajax request - the success option, we call the response processing function response . In the argument we pass to this function, we can process the data received in the server response in any way we wish. We use the $.map method to apply some function to each element of the object passed in the first argument. Inside the function we can access the properties of the object - item.countryName, item.lng, item.lat ( why the properties are the way they are - see the API documentation provided by the web service). The function we wrote, for each element, returns an object containing two properties that we defined ourselves using the received data. From the resulting array of such objects, a list of hints is constructed.

In general, something like this... In conclusion, a big human request - in the comments, please, you can praise or scold in principle. If you want to ask a technical question, then ask it at

« This is the official instruction for Alcatel PIXI 3(4.5) 4027D in Russian, which is suitable for Android 4.4. In case you have updated your... »

Installing TTF fonts on your computer How to remove an installed font

« What is a font? A font is a graphical representation of a set of characters (numbers, letters and symbols). Fonts are installed with the operating system... »

Setting up a wi-fi router from Netbynet

« In this article, we will look at setting up the D-Link DIR-300 router using the example of the NetByNet provider...Manual for setting up the D-Link DIR-300 router. 1.... »