{"id":75,"date":"2020-06-30T11:03:55","date_gmt":"2020-06-30T11:03:55","guid":{"rendered":"http:\/\/santosh-shah.com\/blog\/jquery-ui-autocomplete-with-api-request\/"},"modified":"2020-06-30T11:03:55","modified_gmt":"2020-06-30T11:03:55","slug":"jquery-ui-autocomplete-with-api-request","status":"publish","type":"post","link":"https:\/\/santosh-shah.com\/blog\/jquery-ui-autocomplete-with-api-request\/","title":{"rendered":"Jquery UI autocomplete with API request"},"content":{"rendered":"<p>Jquery UI autocomplete with API request is one of the recent thing I have done. I am going to share what I have done. In order to start with Jquery UI autocomplete with API request we will use jqueryUI plugin.<\/p>\n<pre><code>\tautoComplete: function(input,apiUrl,selectCallback,renderCallback){\n\t\t$(input).autocomplete({\n\t\t    minLength: 3,\n\t\t    delay: 300, \/\/ this is in milliseconds\n\t\t    json: true,\n\t\t      source:function(request,response){\n\t\t\t        var $this = $(this);\n\t\t\t        var $element = $(this.element);\n\t\t\t        var previous_request = $element.data( \"jqXHR\" );\n\t\t\t        if( previous_request ) {\n\t\t\t            previous_request.abort();\n\t\t\t        }\n\t\t\t        $element.data( \"jqXHR\", $.ajax({\n\t\t\t\t\t\t\t\t  url:apiUrl,\n\t\t\t\t\t\t\t\t  method:\"GET\",\n\t\t\t\t\t\t\t\t  dataType: \"json\",\n\t\t\t\t\t\t\t\t  data: {callData:{text: request.term}},\n\t\t\t\t\t\t\t\t  success: function(responseData){\n\t\t\t\t\t\t\t\t\tresponse(responseData.data.results);\n\t\t\t\t\t\t\t\t\t$(input).removeClass(\"ui-autocomplete-loading\");\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t}));\n\t\t\t },\n\t\t      select:selectCallback,\n\t\t\t  create: function() {\n\t\t\t         $(this).data('ui-autocomplete')._renderItem = renderCallback\n\t\t\t     }\n\t\t });\n\t},<\/code><\/pre>\n<p>The above function is a object based function also called as method. A method is the function which is associated with an object. You can simply see that I have used the existing autocomplete code from jQuery UI and add some customization. I have also add the feature to cancel the previous API request and give priority to call only the latest. So, if the user keep typing in the text box with 300 ms gap and after 3 words, it will start executing API for each word enter. So, the abort() function is going to handle such request. It will simply cancelled all the previous request.<\/p>\n<pre><code>\tvar app = {\n\tcreateApiPath : function(apiController, apiAction) {\n\t\tvar jsonUrl = jsonAPIUrl + 'api\/' + apiController + '\/' +  apiAction + '\/';\n\t\treturn jsonUrl;\n\t},\n\tapiCustomPost: function (apiController, apiAction, callParams, callback) {\n\t\t$.ajax({\n\t\t\t\turl: this.createApiPath(apiController, apiAction),\n\t\t\t\tmethod: \"post\",\n\t\t\t\tdata:{\n\t\t\t\t\t\tcallData: JSON.parse(JSON.stringify(callParams)),\n\t\t\t\t\t\tapi_version: 1,\n\t\t\t\t\t\tdeviceType: 'web'\n\t\t\t\t\t},\n\t\t\t\tasync: true,\n\t\t\t\tdataType: \"json\",\n\t\t\t\tsuccess: callback,\n\t\t\t\terror: function (xhr, ajaxOptions, thrownError) {\n\t\t\t}\n\t\t});\n\t},\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Jquery UI autocomplete with API request is one of the recent thing I have done. I am going to share what I have done. In order to start with Jquery UI autocomplete with API request we will use jqueryUI plugin. autoComplete: function(input,apiUrl,selectCallback,renderCallback){ $(input).autocomplete({ minLength: 3, delay: 300, \/\/ this is in milliseconds json: true, source:function(request,response){ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-75","post","type-post","status-publish","format-standard","hentry","category-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Jquery UI autocomplete with API request - Santosh Kumar Shah<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/santosh-shah.com\/blog\/jquery-ui-autocomplete-with-api-request\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Jquery UI autocomplete with API request - Santosh Kumar Shah\" \/>\n<meta property=\"og:description\" content=\"Jquery UI autocomplete with API request is one of the recent thing I have done. I am going to share what I have done. In order to start with Jquery UI autocomplete with API request we will use jqueryUI plugin. autoComplete: function(input,apiUrl,selectCallback,renderCallback){ $(input).autocomplete({ minLength: 3, delay: 300, \/\/ this is in milliseconds json: true, source:function(request,response){ [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/santosh-shah.com\/blog\/jquery-ui-autocomplete-with-api-request\/\" \/>\n<meta property=\"og:site_name\" content=\"Santosh Kumar Shah\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-30T11:03:55+00:00\" \/>\n<meta name=\"author\" content=\"Santosh Kumar Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Santosh Kumar Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/jquery-ui-autocomplete-with-api-request\/\",\"url\":\"https:\/\/santosh-shah.com\/blog\/jquery-ui-autocomplete-with-api-request\/\",\"name\":\"Jquery UI autocomplete with API request - Santosh Kumar Shah\",\"isPartOf\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\"},\"datePublished\":\"2020-06-30T11:03:55+00:00\",\"author\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\"},\"breadcrumb\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/jquery-ui-autocomplete-with-api-request\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/santosh-shah.com\/blog\/jquery-ui-autocomplete-with-api-request\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/jquery-ui-autocomplete-with-api-request\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/santosh-shah.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Jquery UI autocomplete with API request\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\",\"url\":\"https:\/\/santosh-shah.com\/blog\/\",\"name\":\"Santosh Kumar Shah\",\"description\":\"JavaScript Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\",\"name\":\"Santosh Kumar Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"caption\":\"Santosh Kumar Shah\"},\"description\":\"I am JavaScript developer.\",\"sameAs\":[\"https:\/\/santosh-shah.com\/blog\"],\"url\":\"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Jquery UI autocomplete with API request - Santosh Kumar Shah","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:\/\/santosh-shah.com\/blog\/jquery-ui-autocomplete-with-api-request\/","og_locale":"en_US","og_type":"article","og_title":"Jquery UI autocomplete with API request - Santosh Kumar Shah","og_description":"Jquery UI autocomplete with API request is one of the recent thing I have done. I am going to share what I have done. In order to start with Jquery UI autocomplete with API request we will use jqueryUI plugin. autoComplete: function(input,apiUrl,selectCallback,renderCallback){ $(input).autocomplete({ minLength: 3, delay: 300, \/\/ this is in milliseconds json: true, source:function(request,response){ [&hellip;]","og_url":"https:\/\/santosh-shah.com\/blog\/jquery-ui-autocomplete-with-api-request\/","og_site_name":"Santosh Kumar Shah","article_published_time":"2020-06-30T11:03:55+00:00","author":"Santosh Kumar Shah","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Santosh Kumar Shah","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/santosh-shah.com\/blog\/jquery-ui-autocomplete-with-api-request\/","url":"https:\/\/santosh-shah.com\/blog\/jquery-ui-autocomplete-with-api-request\/","name":"Jquery UI autocomplete with API request - Santosh Kumar Shah","isPartOf":{"@id":"https:\/\/santosh-shah.com\/blog\/#website"},"datePublished":"2020-06-30T11:03:55+00:00","author":{"@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f"},"breadcrumb":{"@id":"https:\/\/santosh-shah.com\/blog\/jquery-ui-autocomplete-with-api-request\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/santosh-shah.com\/blog\/jquery-ui-autocomplete-with-api-request\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/santosh-shah.com\/blog\/jquery-ui-autocomplete-with-api-request\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/santosh-shah.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Jquery UI autocomplete with API request"}]},{"@type":"WebSite","@id":"https:\/\/santosh-shah.com\/blog\/#website","url":"https:\/\/santosh-shah.com\/blog\/","name":"Santosh Kumar Shah","description":"JavaScript Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f","name":"Santosh Kumar Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","caption":"Santosh Kumar Shah"},"description":"I am JavaScript developer.","sameAs":["https:\/\/santosh-shah.com\/blog"],"url":"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/"}]}},"_links":{"self":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/75","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/comments?post=75"}],"version-history":[{"count":0,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/75\/revisions"}],"wp:attachment":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/media?parent=75"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/categories?post=75"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/tags?post=75"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}