{"id":657,"date":"2014-09-19T19:44:23","date_gmt":"2014-09-19T19:44:23","guid":{"rendered":"http:\/\/luisrodriguez.pe\/blog\/?p=657"},"modified":"2014-09-19T19:51:27","modified_gmt":"2014-09-19T19:51:27","slug":"crear-un-autocompletar-en-jquery","status":"publish","type":"post","link":"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/","title":{"rendered":"Crear un autocompletar en jquery"},"content":{"rendered":"

En ocasi\u00f3n tenemos mucha data que cargar en un select que nos inclinamos por usar un autocompletar y de hecho podemos encontrar varios pero no siempre se amoldan a nuestras necesidades y modificarlos puede llegar a dar dolor de cabeza.<\/p>\n

Para los reacios que no quieren ver las ventajas aqu\u00ed les dejo unas.<\/p>\n

    \n
  1. Velocidad para mejorar tu SEO<\/li>\n
  2. Facilidad de B\u00fasqueda UX<\/li>\n
  3. Dise\u00f1o m\u00e1s atractivo de UI<\/li>\n<\/ol>\n

    A continuaci\u00f3n voy hacer un ejemplo paso a paso de c\u00f3mo se crea uno en jquery y php.<\/p>\n

    aqui el html con lineas comentadas explicando
    \n<\/p>\n\n

     \n<!DOCTYPE html> \r\n<html>\r\n    <head>\r\n        <title>atocompletar<\/title>\r\n        <meta charset="UTF-8">\r\n        <meta name="viewport" content="width=device-width, initial-scale=1.0">\r\n    <\/head>\r\n    <body>\r\n        <!--formulario del autocompletar-->\r\n        <form method="post">\r\n            <!--aqui escribimos el nombre de departamento y activa el autocompletar-->\r\n            <input type="text" name="departamentos" id="departamentos" \/>\r\n            <!--aqui va el codigo del departamento cuando selecciona-->\r\n            <input type="hidden" name="codigo_departamentos" id="codigo_departamentos" \/>\r\n        <\/form> \r\n        <!--agregamos jquery-->\r\n        <script src="js\/jquery.js" type="text\/javascript"><\/script>\r\n        <!--agregamos nuestro script de autocompletar-->\r\n        <script src="js\/autocompletar.js" type="text\/javascript"><\/script>\r\n    <\/body>\r\n<\/html><\/pre><\/td><\/tr><\/table><\/div>\n\n
    <\/code><\/p>\n
    un php que debe mandar un json con la data real pero aqui puse un dato en duro pero en javascript hago que envie un dato en get para que sirva para filtrar una consulta sql que eso seria en casos reales. <\/p>\n
    solo por demo coloco un json en duro.
    \n<\/p>\n\n
    $data<\/span>=<\/span>array<\/span>(<\/span>array<\/span>(<\/span>"codigo"<\/span>=><\/span>"001"<\/span>,<\/span>"provincia"<\/span>=><\/span>"LIMA"<\/span>)<\/span>,<\/span>\n            array<\/span>(<\/span>"codigo"<\/span>=><\/span>"002"<\/span>,<\/span>"provincia"<\/span>=><\/span>"AYACUCHO"<\/span>)<\/span>,<\/span>\n            array<\/span>(<\/span>"codigo"<\/span>=><\/span>"003"<\/span>,<\/span>"provincia"<\/span>=><\/span>"JUNIN"<\/span>)<\/span>,<\/span>\n            array<\/span>(<\/span>"codigo"<\/span>=><\/span>"004"<\/span>,<\/span>"provincia"<\/span>=><\/span>"PUNO"<\/span>)<\/span>,<\/span>\n            array<\/span>(<\/span>"codigo"<\/span>=><\/span>"005"<\/span>,<\/span>"provincia"<\/span>=><\/span>"TRUJILLO"<\/span>)<\/span>,<\/span>\n            array<\/span>(<\/span>"codigo"<\/span>=><\/span>"006"<\/span>,<\/span>"provincia"<\/span>=><\/span>"IQUITOS"<\/span>)<\/span>,<\/span>\n            array<\/span>(<\/span>"codigo"<\/span>=><\/span>"007"<\/span>,<\/span>"provincia"<\/span>=><\/span>"LORETO"<\/span>)<\/span>\n        )<\/span>;<\/span>\n \necho<\/span> json_encode<\/span>(<\/span>$data<\/span>)<\/span>;<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
    <\/code><\/p>\n
    las siguientes lineas son la base de todo y cada linea tiene explicacion<\/p>\n
    <\/p>\n\n
    \/\/cuando tecle en el input se ejecutara<\/span>\n    $(<\/span>"#departamentos"<\/span>)<\/span>.on<\/span>(<\/span>"keyup"<\/span>,<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n        \/\/la referencia al input lo metemos en una variable<\/span>\n        var<\/span> $this=<\/span>$(<\/span>this<\/span>)<\/span>;<\/span>\n        \/\/eliminamos el div si existiera<\/span>\n        $(<\/span>"#autocompletar"<\/span>)<\/span>.remove<\/span>(<\/span>)<\/span>;<\/span>  \n        \/\/solo si es mayor a 3 envia un ajax<\/span>\n        if<\/span> (<\/span>$(<\/span>"#departamentos"<\/span>)<\/span>.val<\/span>(<\/span>)<\/span>.length<\/span> >=<\/span>3<\/span>)<\/span>\n        {<\/span>\n            \/\/para hacer bonito el efecto agregamos un gif de load en la parte derecha del input <\/span>\n            \/\/sera un background<\/span>\n            $this.css<\/span>(<\/span>{<\/span>"background"<\/span>:<\/span>"url('chrome-extension:\/\/hlngmmdolgbdnnimbmblfhhndibdipaf\/images\/loader.gif') top right no-repeat"<\/span>}<\/span>)<\/span>\n           \/\/capturamos el valor de ingreso en el campo<\/span>\n            var<\/span> departamentos=<\/span>$this.val<\/span>(<\/span>)<\/span>;<\/span>\n            \/\/hacemos un ajax en get y enviamos un variable get que es el dato que ingreso en el input<\/span>\n            $.get<\/span>(<\/span>"data.php"<\/span>,<\/span>{<\/span>"departamentos"<\/span>:<\/span>departamentos}<\/span>,<\/span>function<\/span>(<\/span>data)<\/span>{<\/span>\n                \/\/ahora crearemos un div para mostrar los resultados pero queremos que sea debajo del input <\/span>\n                \/\/y para eso debemos obtener la posicion del elemento para eso position de jquery<\/span>\n                posicion=<\/span>$this.position<\/span>(<\/span>)<\/span>;<\/span> \n                \/\/guardamos el top , left y width <\/span>\n                \/\/<\/span>\n                \/\/el top actual + el alto de la cajita para posicionarlo debajo de la cajita me refiero al input<\/span>\n                \/\/adicionalmente 10 px mas para que no sea tan pegado<\/span>\n                var<\/span> top=<\/span>parseInt(<\/span>posicion.top<\/span>)<\/span>+<\/span>parseInt(<\/span>$this.height<\/span>(<\/span>)<\/span>)<\/span>+<\/span>10<\/span>;<\/span> \n                \/\/el left del la cajita<\/span>\n                var<\/span> left=<\/span>posicion.left<\/span>;<\/span>\n                \/\/el ancho de la cajita + 100 px<\/span>\n                var<\/span> width=<\/span>parseInt(<\/span>$this.width<\/span>(<\/span>)<\/span>)<\/span>+<\/span>100<\/span>\n                \/\/debemos crear el div pero consultamos si existe para no volver a crearlo<\/span>\n                if<\/span> (<\/span>!<\/span>$(<\/span>"#autocompletar"<\/span>)<\/span>.length<\/span>)<\/span>\n                {<\/span>\n                    \/\/en caso no exista lo creamos dando las medidas<\/span>\n                    $(<\/span>"body"<\/span>)<\/span>.append<\/span>(<\/span>"<div id='autocompletar' style='overflow:auto;top:"<\/span>+<\/span>top+<\/span>"px;left:"<\/span>+<\/span>left+<\/span>"px;width:"<\/span>+<\/span>width+<\/span>"px; height:100px;position:absolute; border:1px solid #ebebeb'><\/div>"<\/span>)<\/span>\n                }<\/span>\n                var<\/span> html=<\/span>''<\/span>;<\/span>\n                \/\/ahora creamos el contenido que va dentro del div sera un ul con la respuesta<\/span>\n                html +=<\/span>'<ul id="lista">'<\/span>;<\/span>\n                data=<\/span>$.parseJSON<\/span>(<\/span>data)<\/span>;<\/span>\n                \/\/un recorrido a la respuesta que nos envio el ajax que en este caso se llama data<\/span>\n                $.each<\/span>(<\/span>data,<\/span> function<\/span>(<\/span>i,<\/span> item)<\/span> {<\/span>\n                        \/\/creamos un li por cada vuelta y con atributos en el li que <\/span>\n                        \/\/nos serviran para que cuando seleccione guardarlos de alguna forma<\/span>\n                        html +=<\/span>'<li data-codigo="'<\/span>+<\/span>item.codigo<\/span>+<\/span>'"  data-provincia="'<\/span>+<\/span>item.provincia<\/span>+<\/span>'"><a href="javascript:;">'<\/span>+<\/span>item.provincia<\/span>+<\/span>'<\/a><\/li>'<\/span>;<\/span>\n                }<\/span>)<\/span>;<\/span>\n                html +=<\/span>'<\/ul>'<\/span>;<\/span>\n                \/\/cancelamos el efecto del load del gif<\/span>\n                $this.css<\/span>(<\/span>{<\/span>"background"<\/span>:<\/span>""<\/span>}<\/span>)<\/span>\n                \/\/limpiamos todo lo que pueda tener el div contenedor y agregamos toda nuestra ul que tiene<\/span>\n                \/\/la data obtenida como respuesta del ajax<\/span>\n                $(<\/span>"#autocompletar"<\/span>)<\/span>.empty<\/span>(<\/span>)<\/span>.append<\/span>(<\/span>html)<\/span>\n            }<\/span>)<\/span>;<\/span>\n        }<\/span>\n    }<\/span>)<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
    <\/code><\/p>\n
    ahora la funcion que se ejecuta al selecciona un item de la respuesta.<\/p>\n
    <\/p>\n\n
    \/\/funcion que se ejecuta cuando hace click en una opcion de la respuesta al escribir<\/span>\n    $(<\/span>document)<\/span>.on<\/span>(<\/span>"click"<\/span>,<\/span>"li"<\/span>,<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n        \/\/aqui tenemos los atributos que creamos en el li<\/span>\n        \/\/jalamos el codigo y el texto del nombre de la provincia<\/span>\n        codigo=<\/span>$(<\/span>this<\/span>)<\/span>.attr<\/span>(<\/span>"data-codigo"<\/span>)<\/span>;<\/span>\n        provincia=<\/span>$(<\/span>this<\/span>)<\/span>.attr<\/span>(<\/span>"data-provincia"<\/span>)<\/span>;<\/span>\n        \/\/asignamos los valores<\/span>\n        $(<\/span>"#codigo_departamentos"<\/span>)<\/span>.val<\/span>(<\/span>codigo)<\/span>\n        $(<\/span>"#departamentos"<\/span>)<\/span>.val<\/span>(<\/span>provincia)<\/span>\n        \/\/y finalmente eliminamos el elementos del autocompletar<\/span>\n        $(<\/span>"#autocompletar"<\/span>)<\/span>.remove<\/span>(<\/span>)<\/span>;<\/span>\n    }<\/span>)<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
    <\/code><\/p>\n
    puede ver en funcionamiento el script<\/p>\n
    autocompletar jquery demo<\/a>
    \ny descargarlo aqui
    \n    autocompletar jquery<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"En ocasi\u00f3n tenemos mucha data que cargar en un select que nos inclinamos por usar un autocompletar y de hecho podemos encontrar varios pero no siempre se amoldan a nuestras necesidades y modificarlos puede llegar a dar dolor de cabeza. Para los reacios que no quieren ver las ventajas aqu\u00ed les dejo unas. Velocidad para[…]","protected":false},"author":1,"featured_media":991,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,14],"tags":[63,22,17],"class_list":["post-657","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-jquery","tag-autocompletar","tag-javascript-2","tag-jquery-2"],"yoast_head":"\nCrear un autocompletar en jquery - Blog Luis Rodriguez<\/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:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crear un autocompletar en jquery - Blog Luis Rodriguez\" \/>\n<meta property=\"og:description\" content=\"En ocasi\u00f3n tenemos mucha data que cargar en un select que nos inclinamos por usar un autocompletar y de hecho podemos encontrar varios pero no siempre se amoldan a nuestras necesidades y modificarlos puede llegar a dar dolor de cabeza. Para los reacios que no quieren ver las ventajas aqu\u00ed les dejo unas. Velocidad para[...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Luis Rodriguez\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/luisrodriguez.pe\" \/>\n<meta property=\"article:published_time\" content=\"2014-09-19T19:44:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-09-19T19:51:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/09\/Screenshot_2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"438\" \/>\n\t<meta property=\"og:image:height\" content=\"309\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Luis Rodriguez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@luizmirodriguez\" \/>\n<meta name=\"twitter:site\" content=\"@luizmirodriguez\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Luis Rodriguez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/\"},\"author\":{\"name\":\"Luis Rodriguez\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\"},\"headline\":\"Crear un autocompletar en jquery\",\"datePublished\":\"2014-09-19T19:44:23+00:00\",\"dateModified\":\"2014-09-19T19:51:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/\"},\"wordCount\":193,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/09\/Screenshot_2.png\",\"keywords\":[\"autocompletar\",\"javascript\",\"jquery\"],\"articleSection\":[\"JAVASCRIPT\",\"Jquery\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/\",\"name\":\"Crear un autocompletar en jquery - Blog Luis Rodriguez\",\"isPartOf\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/09\/Screenshot_2.png\",\"datePublished\":\"2014-09-19T19:44:23+00:00\",\"dateModified\":\"2014-09-19T19:51:27+00:00\",\"author\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\"},\"breadcrumb\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/#primaryimage\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/09\/Screenshot_2.png\",\"contentUrl\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/09\/Screenshot_2.png\",\"width\":438,\"height\":309},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/luisrodriguez.pe\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Crear un autocompletar en jquery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#website\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/\",\"name\":\"Blog Luis Rodriguez\",\"description\":\"Analytics Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/luisrodriguez.pe\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\",\"name\":\"Luis Rodriguez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"caption\":\"Luis Rodriguez\"},\"description\":\"Hola, Soy Luis Rodriguez, radico en Lima \u2013 Per\u00fa, formado en una carrera inform\u00e1tica, desempe\u00f1ando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi inter\u00e9s en la Anal\u00edtica Web me ayud\u00f3 mucho entender el funcionamiento interno de las herramientas de anal\u00edtica, con las que vengo trabajo activamente desde 2017. Linkedin\",\"sameAs\":[\"http:\/\/luisrodriguez.pe\"],\"url\":\"https:\/\/luisrodriguez.pe\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Crear un autocompletar en jquery - Blog Luis Rodriguez","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:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/","og_locale":"es_ES","og_type":"article","og_title":"Crear un autocompletar en jquery - Blog Luis Rodriguez","og_description":"En ocasi\u00f3n tenemos mucha data que cargar en un select que nos inclinamos por usar un autocompletar y de hecho podemos encontrar varios pero no siempre se amoldan a nuestras necesidades y modificarlos puede llegar a dar dolor de cabeza. Para los reacios que no quieren ver las ventajas aqu\u00ed les dejo unas. Velocidad para[...]","og_url":"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/","og_site_name":"Blog Luis Rodriguez","article_publisher":"https:\/\/www.facebook.com\/luisrodriguez.pe","article_published_time":"2014-09-19T19:44:23+00:00","article_modified_time":"2014-09-19T19:51:27+00:00","og_image":[{"width":438,"height":309,"url":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/09\/Screenshot_2.png","type":"image\/png"}],"author":"Luis Rodriguez","twitter_card":"summary_large_image","twitter_creator":"@luizmirodriguez","twitter_site":"@luizmirodriguez","twitter_misc":{"Escrito por":"Luis Rodriguez","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/#article","isPartOf":{"@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/"},"author":{"name":"Luis Rodriguez","@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c"},"headline":"Crear un autocompletar en jquery","datePublished":"2014-09-19T19:44:23+00:00","dateModified":"2014-09-19T19:51:27+00:00","mainEntityOfPage":{"@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/"},"wordCount":193,"commentCount":0,"image":{"@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/09\/Screenshot_2.png","keywords":["autocompletar","javascript","jquery"],"articleSection":["JAVASCRIPT","Jquery"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/","url":"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/","name":"Crear un autocompletar en jquery - Blog Luis Rodriguez","isPartOf":{"@id":"https:\/\/luisrodriguez.pe\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/#primaryimage"},"image":{"@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/09\/Screenshot_2.png","datePublished":"2014-09-19T19:44:23+00:00","dateModified":"2014-09-19T19:51:27+00:00","author":{"@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c"},"breadcrumb":{"@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/#primaryimage","url":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/09\/Screenshot_2.png","contentUrl":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2014\/09\/Screenshot_2.png","width":438,"height":309},{"@type":"BreadcrumbList","@id":"https:\/\/luisrodriguez.pe\/blog\/crear-un-autocompletar-en-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/luisrodriguez.pe\/blog\/"},{"@type":"ListItem","position":2,"name":"Crear un autocompletar en jquery"}]},{"@type":"WebSite","@id":"https:\/\/luisrodriguez.pe\/blog\/#website","url":"https:\/\/luisrodriguez.pe\/blog\/","name":"Blog Luis Rodriguez","description":"Analytics Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/luisrodriguez.pe\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c","name":"Luis Rodriguez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","caption":"Luis Rodriguez"},"description":"Hola, Soy Luis Rodriguez, radico en Lima \u2013 Per\u00fa, formado en una carrera inform\u00e1tica, desempe\u00f1ando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi inter\u00e9s en la Anal\u00edtica Web me ayud\u00f3 mucho entender el funcionamiento interno de las herramientas de anal\u00edtica, con las que vengo trabajo activamente desde 2017. Linkedin","sameAs":["http:\/\/luisrodriguez.pe"],"url":"https:\/\/luisrodriguez.pe\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/comments?post=657"}],"version-history":[{"count":11,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/657\/revisions"}],"predecessor-version":[{"id":668,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/657\/revisions\/668"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/media\/991"}],"wp:attachment":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/media?parent=657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/categories?post=657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/tags?post=657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}