{"id":300,"date":"2011-06-22T16:07:01","date_gmt":"2011-06-22T16:07:01","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=300"},"modified":"2012-02-29T21:22:33","modified_gmt":"2012-02-29T21:22:33","slug":"buscador-php-javascript","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/buscador-php-javascript\/","title":{"rendered":"Buscador de contenido con PHP y javascript"},"content":{"rendered":"<p>Al crear una p\u00e1gina Web de contenidos siempre es necesario disponer de <a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/06\/buscador.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-thumbnail wp-image-303\" title=\"buscador\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/06\/buscador-150x150.jpg\" alt=\"\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/06\/buscador-150x150.jpg 150w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/06\/buscador-80x80.jpg 80w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>un buen buscador para facilitarle la vida al usuario. El siguiente script muestra como un buscador de contenido que al escribir dentro del input text va mostrando mediante javascript resultados.<\/p>\n<p>El script se compone de un archivo \u00edndice que contiene la llamada al script js necesario y el formulario html con un input que al escribir dentro de \u00e9l, va ejecutando una funci\u00f3n javascript que dentro de esta se llama a un archivo php que se encargar\u00e1 de retornar los resultados haciendo una b\u00fasqueda en la base de datos. En el caso de este ejemplo concreto, hacemos una b\u00fasqueda de lo que se escriba en los campos de la base de datos: t\u00edtulo, cuerpo, resumen y keywords.<\/p>\n<p>Para implementar lo siguiente debemos tener en el tag &lt;body&gt; un formulario como el que sigue:<\/p>\n<pre id=\"line1\">&lt;form&gt;\r\n\t&lt;h3&gt;Buscador &lt;input type=\"text\" id=\"txt1\" class=\"text\" onkeyup=\"showHint(this.value)\" \/&gt;&lt;\/h3&gt;\r\n&lt;\/form&gt;\r\n&lt;p&gt;&lt;span id=\"txtHint\"&gt;&lt;\/span&gt;&lt;\/p&gt;<\/pre>\n<p>En este formulario al escribir en el input con id=\u00bbtxt1&#8243; estamos llamando en cada car\u00e1cter pulsado a la funci\u00f3n javascript \u00abshowHint()\u00bb pas\u00e1ndole como par\u00e1metro el valor del input, es decir, lo que se est\u00e1 escribiendo.<\/p>\n<p>La funci\u00f3n showHint() la tenemos dentro de un archivo .js que debemos llamar l\u00f3gicamente en el tag &lt;head&gt; de la p\u00e1gina.<\/p>\n<p>Esta funci\u00f3n se encarga de llamar al archivo .php que ser\u00e1 el que haga las query&#8217;s para retornar los resultados que se van mostrando en el &lt;span id=\u00bbtxtHint\u00bb&gt;&lt;\/span&gt;.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/javascript\/buscador\/\">Ver ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Al crear una p\u00e1gina Web de contenidos siempre es necesario disponer de un buen buscador para facilitarle la vida al usuario. El siguiente script muestra como un buscador de contenido que al escribir dentro del input text va mostrando mediante javascript resultados. El script se compone de un archivo \u00edndice que contiene la llamada al [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":303,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,3],"tags":[68],"class_list":["post-300","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-javascript","category-php","tag-buscadores"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Buscador de contenido con PHP y javascript - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Buscador de contenido con PHP y javascript - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Al crear una p\u00e1gina Web de contenidos siempre es necesario disponer de un buen buscador para facilitarle la vida al usuario. El siguiente script muestra como un buscador de contenido que al escribir dentro del input text va mostrando mediante javascript resultados. El script se compone de un archivo \u00edndice que contiene la llamada al [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/buscador-php-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2011-06-22T16:07:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-02-29T21:22:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/06\/buscador.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"212\" \/>\n\t<meta property=\"og:image:height\" content=\"167\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/buscador-php-javascript\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/buscador-php-javascript\/\",\"name\":\"Buscador de contenido con PHP y javascript - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/buscador-php-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/buscador-php-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/06\/buscador.jpg\",\"datePublished\":\"2011-06-22T16:07:01+00:00\",\"dateModified\":\"2012-02-29T21:22:33+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/buscador-php-javascript\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/buscador-php-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/buscador-php-javascript\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/06\/buscador.jpg\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/06\/buscador.jpg\",\"width\":212,\"height\":167},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/buscador-php-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Buscador de contenido con PHP y javascript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Buscador de contenido con PHP y javascript - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Buscador de contenido con PHP y javascript - Jose Aguilar Blog","og_description":"Al crear una p\u00e1gina Web de contenidos siempre es necesario disponer de un buen buscador para facilitarle la vida al usuario. El siguiente script muestra como un buscador de contenido que al escribir dentro del input text va mostrando mediante javascript resultados. El script se compone de un archivo \u00edndice que contiene la llamada al [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/buscador-php-javascript\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2011-06-22T16:07:01+00:00","article_modified_time":"2012-02-29T21:22:33+00:00","og_image":[{"width":212,"height":167,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/06\/buscador.jpg","type":"image\/jpeg"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/buscador-php-javascript\/","url":"https:\/\/www.jose-aguilar.com\/blog\/buscador-php-javascript\/","name":"Buscador de contenido con PHP y javascript - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/buscador-php-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/buscador-php-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/06\/buscador.jpg","datePublished":"2011-06-22T16:07:01+00:00","dateModified":"2012-02-29T21:22:33+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/buscador-php-javascript\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/buscador-php-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/buscador-php-javascript\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/06\/buscador.jpg","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/06\/buscador.jpg","width":212,"height":167},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/buscador-php-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Buscador de contenido con PHP y javascript"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/300","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=300"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/300\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/303"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}