{"id":1816,"date":"2014-11-28T13:15:22","date_gmt":"2014-11-28T11:15:22","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=1816"},"modified":"2018-06-20T17:10:36","modified_gmt":"2018-06-20T14:10:36","slug":"jquery-autocomplete-widget-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/","title":{"rendered":"JQuery Autocomplete Widget Example"},"content":{"rendered":"

By now everyone who has used a search engine has experienced auto-complete functionality at work. Originally intended to help those with physical limitations reduce the need for keyboard input, it has become commonplace on nearly every input element across a variety of software. In this article we will look at the details of the JQuery Autocomplete widget; how to implement it, it’s wide range of capabilities and hopefully give you everything you need to know in order to start using it effectively and exercising it’s abilities to the fullest.
\n <\/p>\n

[ulp id=’qGGDqWnle19VavkM’]<\/p>\n

What we will have done by the end of the article<\/h2>\n

For this example, we own a bakery which is famous for it’s pies, with these changing daily. We are assigned to assist customers in finding today’s selection of pies.<\/p>\n

So you know where we will ultimately want to end up, here is the complete code example:<\/p>\n

\r\n<body>\r\n  <script>\r\n    $(function() {\r\n      var availablePies = [\r\n        "Apple",\r\n        "Cherry",\r\n        "Blueberry",\r\n        "Strawberry",\r\n        "Snozzleberry",\r\n        "Pumpkin"\r\n      ];\r\n      $("#pies").autocomplete({\r\n        source: availablePies\r\n      });\r\n    });\r\n  <\/script>\r\n\r\n  <div>\r\n    <label for="pies">pies:<\/label>\r\n    <input id="pies">\r\n  <\/div>\r\n<\/body>\r\n<\/pre>\n
Now let’s break it down, section by section.<\/p>\n
HTML markup<\/h2>\n
We start with some HTML to get rolling. Kindly assume the presence of the required <html><\/code> and <head><\/code> tags.<\/p>\n
We have an input element in our HTML as shown below, wrapped in a div and including a label to identify it:<\/p>\n
\r\n<div>\r\n    <label for="pies">pies:<\/label>\r\n    <input id="pies">\r\n  <\/div>\r\n<\/pre>\n
Setting up jQuery<\/h2>\n
First, to include the JQuery and JQueryUI library on our page we put the following snippets of code in the section of our markup:<\/p>\n
\r\n<script src="\/\/code.jquery.com\/jquery-1.10.2.js"><\/script>\r\n<script src="\/\/code.jquery.com\/ui\/1.11.2\/jquery-ui.js"><\/script>\r\n<\/pre>\n
With references to the necessary libraries in place and the elements defined in the HTML that we are intending to manipulate, we are set to dive into the widget itself.<\/p>\n
Let’s dive in<\/h2>\n
The Autocomplete widget is one of the few JQuery widgets that must have at least one parameter to it: You must specify a source<\/code> property on the widget. We will use a simple array as follows:<\/p>\n
\r\nvar availablePies = [\r\n        "Apple",\r\n        "Cherry",\r\n        "Blueberry",\r\n        "Strawberry",\r\n        "Snozzleberry",\r\n        "Pumpkin"\r\n      ];\r\n<\/pre>\n
Obviously it would need values for the source property as this is where it gets the elements it is going to autocomplete from \u2013 without them, it would have no functionality.<\/p>\n
Next we use the JQuery operator to grab the intended element as shown below:<\/p>\n
\r\n$("#pies").autocomplete({\r\n        source: availablePies\r\n      });\r\n<\/pre>\n
Notice we have set the source<\/code> property to the value of availablePies<\/code> – the array we defined previously.<\/p>\n
As of this moment, we have everything we need to get our example running. In your development environment of choice (I use Plunker<\/a> for example) please enter the code as instructed above and execute it, entering the letter s<\/code> for test purposes. We should see the results Strawberry<\/code> and Willy Wonka’s favorite, Snozzleberry<\/code>.<\/p>\n
There are two other options when it comes to specifying the source<\/code> option: a string (which resolves to a URL) or a function, which is a callback and is the most complicated to use. Examples of both will be shown below. Let’s move on for now.<\/p>\n
Optimizing our Widget<\/h2>\n
The array implementation shown previous is, of course, the bare-bones minimum you need to get Autocomplete up and running. Some additional Options, Methods and Events can and will ultimately be used in your professional usage of this widget. We will explore a few of the more frequently used ones now.<\/p>\n
minLength<\/strong><\/p>\n
minLength<\/code> \u2013 specifies, as you might have guessed, the minimum number of characters a user must enter before receiving results. An example in code is below:<\/p>\n
\r\n$("#pies").autocomplete({\r\n        source: availablePies,\r\n        minLength: 2\r\n      });\r\n<\/pre>\n
Now if you test it with s<\/code> you get nothing (no pie for you!) however if you add the t<\/code> after the s<\/code> – you get Strawberry! Nice job! Enjoy!<\/p>\n
delay<\/strong><\/p>\n
Next we have the delay<\/code> option which is the delay in milliseconds between when a keystroke occurs and when a search is performed, as written in the API:<\/p>\n
\r\n$("#pies").autocomplete({\r\n        source: availablePies,\r\n        minLength: 2,\r\n        delay: 500\r\n      });\r\n<\/pre>\n
Again, entering st<\/code> and after a very slight delay, we get our Strawberry pie… mmmm, pie.<\/p>\n
source<\/strong><\/p>\n
Returning to the source ( \u201cuse the source, Luke…\u201d ) we realize that nobody is likely to use static array of values to populate the source<\/code> property. In a \u201cprofessional\u201d setting it is likely to be a remote source or something other than a simple local array. Let’s look at the use of a string to define the source option:<\/p>\n
\r\n$("#pies").autocomplete({\r\n        source: "http:\/\/example.com",\r\n        minLength: 2,\r\n        delay: 500\r\n      });\r\n<\/pre>\n
In this instance, the plugin expects that the String specifies a URL resource that returns JSON data. This can be on the same host or a different host (in which case the results must be JSONP format).<\/p>\n
A server-side script (language agnostic of course) must be in place to accept, via a GET request, the input from the plugin and will return the JSON data that matches the parameter it has received.<\/p>\n
Finally and in conclusion, we have the most complicated of the source<\/code> options: using a callback function. This option is the most flexible and with flexibility comes complexity in many programming scenarios, at least in my experience. On to it.<\/p>\n
The function option can be used to connect any datasource to Autocomplete. The function is, as previously mentioned, a callback. It expects (and it will get) two parameters: a request object<\/code> which has a single property, the input the user entered and a response callback<\/code> which expects a single parameter response object, which is the data suggested to the user based on their input.<\/p>\n
\r\n$("#pies").autocomplete({\r\n        source: function ( request, response ) {\r\n\tlogger (request.term);\r\n\tresponse ( ["Strawberry"] );\r\n}\r\n      });\r\n<\/pre>\n
Now in the above scenario the returned data in the response object can be in any of the previously mentioned formats. Like we said, it is the most flexible of the options.<\/p>\n
So that’s an overview of the JQueryUI Autocomplete widget. Go forth and build your empire in code.<\/p>\n
Download the source code<\/h2>\n
This was an example of jQuery Autocomplete Widget.<\/p>\n
Download<\/strong>
\nYou can download the full source code of this example here: AutocompleteWidget<\/a><\/strong><\/div>\n","protected":false},"excerpt":{"rendered":"
By now everyone who has used a search engine has experienced auto-complete functionality at work. Originally intended to help those with physical limitations reduce the need for keyboard input, it has become commonplace on nearly every input element across a variety of software. In this article we will look at the details of the JQuery …<\/p>\n","protected":false},"author":25,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-1816","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery"],"yoast_head":"\nJQuery Autocomplete Widget Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Interested to learn about jquery autocomplete widget? Then check out our Example on how to implement it and it's wide range of capabilities!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JQuery Autocomplete Widget Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Interested to learn about jquery autocomplete widget? Then check out our Example on how to implement it and it's wide range of capabilities!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/era.balliu.7\" \/>\n<meta property=\"article:published_time\" content=\"2014-11-28T11:15:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-06-20T14:10:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Era Balliu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@BalliuEra\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Era Balliu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/\"},\"author\":{\"name\":\"Era Balliu\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e\"},\"headline\":\"JQuery Autocomplete Widget Example\",\"datePublished\":\"2014-11-28T11:15:22+00:00\",\"dateModified\":\"2018-06-20T14:10:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/\"},\"wordCount\":1117,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/\",\"name\":\"JQuery Autocomplete Widget Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2014-11-28T11:15:22+00:00\",\"dateModified\":\"2018-06-20T14:10:36+00:00\",\"description\":\"Interested to learn about jquery autocomplete widget? Then check out our Example on how to implement it and it's wide range of capabilities!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"JQuery Autocomplete Widget Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e\",\"name\":\"Era Balliu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g\",\"caption\":\"Era Balliu\"},\"description\":\"Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML\/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.\",\"sameAs\":[\"http:\/\/www.webcodegeeks.com\/\",\"https:\/\/www.facebook.com\/era.balliu.7\",\"https:\/\/www.instagram.com\/eraballiu\/\",\"https:\/\/www.linkedin.com\/in\/eraballiu\",\"https:\/\/www.pinterest.com\/001r2gw0jt0ln6d\/\",\"https:\/\/x.com\/BalliuEra\",\"https:\/\/www.youtube.com\/c\/eraballiu\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JQuery Autocomplete Widget Example - Web Code Geeks - 2026","description":"Interested to learn about jquery autocomplete widget? Then check out our Example on how to implement it and it's wide range of capabilities!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/","og_locale":"en_US","og_type":"article","og_title":"JQuery Autocomplete Widget Example - Web Code Geeks - 2026","og_description":"Interested to learn about jquery autocomplete widget? Then check out our Example on how to implement it and it's wide range of capabilities!","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/era.balliu.7","article_published_time":"2014-11-28T11:15:22+00:00","article_modified_time":"2018-06-20T14:10:36+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Era Balliu","twitter_card":"summary_large_image","twitter_creator":"@BalliuEra","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Era Balliu","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/"},"author":{"name":"Era Balliu","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e"},"headline":"JQuery Autocomplete Widget Example","datePublished":"2014-11-28T11:15:22+00:00","dateModified":"2018-06-20T14:10:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/"},"wordCount":1117,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/","name":"JQuery Autocomplete Widget Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2014-11-28T11:15:22+00:00","dateModified":"2018-06-20T14:10:36+00:00","description":"Interested to learn about jquery autocomplete widget? Then check out our Example on how to implement it and it's wide range of capabilities!","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-autocomplete-widget-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"JQuery Autocomplete Widget Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e","name":"Era Balliu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","caption":"Era Balliu"},"description":"Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML\/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.","sameAs":["http:\/\/www.webcodegeeks.com\/","https:\/\/www.facebook.com\/era.balliu.7","https:\/\/www.instagram.com\/eraballiu\/","https:\/\/www.linkedin.com\/in\/eraballiu","https:\/\/www.pinterest.com\/001r2gw0jt0ln6d\/","https:\/\/x.com\/BalliuEra","https:\/\/www.youtube.com\/c\/eraballiu"],"url":"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/1816","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=1816"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/1816\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=1816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=1816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=1816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}