{"id":24381,"date":"2021-05-17T10:41:00","date_gmt":"2021-05-17T07:41:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24381"},"modified":"2021-10-17T20:53:27","modified_gmt":"2021-10-17T17:53:27","slug":"kuinka-kayttaa-jquery-automaattista-taydennysta-ajaxin-kanssa","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-kayttaa-jquery-automaattista-taydennysta-ajaxin-kanssa\/","title":{"rendered":"Kuinka k\u00e4ytt\u00e4\u00e4 jQuery-automaattista t\u00e4ydennyst\u00e4 Ajaxin kanssa"},"content":{"rendered":"<p>Haluatko integroida jQuery Autocomplete -sivustosi? jQuery-automaattinen t\u00e4ydennys on kuin Google-haku, jossa k\u00e4ytt\u00e4j\u00e4 sy\u00f6tt\u00e4\u00e4 joitain kirjaimia ja kirjoitettuihin kirjaimiin vastaava tulosjoukko t\u00e4ytet\u00e4\u00e4n ennalta.<\/p>\n<p><a href=\"https:\/\/jqueryui.com\/autocomplete\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">jQuery-k\u00e4ytt\u00f6liittym\u00e4<\/a> tarjoaa automaattisen t\u00e4ydennyksen. T\u00e4m\u00e4n ominaisuuden k\u00e4ytt\u00e4miseksi sinun on k\u00e4ytett\u00e4v\u00e4 niiden toimittamia JS- ja CSS-tiedostoja.<\/p>\n<p>T\u00e4ss\u00e4 lyhyess\u00e4 opetusohjelmassa otamme pienen esimerkin ja n\u00e4yt\u00e4mme sinulle, miten jQuery Autocomplete -ohjelmaa k\u00e4ytet\u00e4\u00e4n Ajaxin kanssa.<\/p>\n<p>Otetaan esimerkkin\u00e4 yksi tekstikentt\u00e4. Kun k\u00e4ytt\u00e4j\u00e4 alkaa kirjoittaa kirjainta t\u00e4h\u00e4n kentt\u00e4\u00e4n, pit\u00e4isi ilmesty\u00e4 valmiiksi t\u00e4ytetyt tiedot, joista k\u00e4ytt\u00e4j\u00e4 voi valita tietyn.<\/p>\n<h3>Kuinka k\u00e4ytt\u00e4\u00e4 jQuery-automaattista t\u00e4ydennyst\u00e4 Ajaxin kanssa<\/h3>\n<p>Oletetaan, ett\u00e4 tekstikentt\u00e4mme on k\u00e4ytt\u00e4j\u00e4n etunimi. Etunime\u00e4 on etsitt\u00e4v\u00e4, ja tietueet nimist\u00e4 tallennetaan tietokantaan.<\/p>\n<p>Luo <code>index.html<\/code>tiedosto ja lis\u00e4\u00e4 siihen alla oleva koodi.<\/p>\n<pre><code>&lt;html&gt;\n&lt;head&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;title&gt;jQuery Autocomplete&lt;\/title&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/css\/bootstrap.min.css\" integrity=\"sha384-Vkoo8x4CGsO3+Hhxv8T\/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh\" crossorigin=\"anonymous\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"\/\/code.jquery.com\/ui\/1.12.1\/themes\/base\/jquery-ui.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"container\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-md-2\"&gt;&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-md-8\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label for=\"exampleInputFname\"&gt;First Name&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"text\" class=\"form-control\" id=\"fnames\" placeholder=\"First Name\" name=\"fname\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-md-2\"&gt;&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;script type=\"text\/javascript\" src=\"https:\/\/code.jquery.com\/jquery-1.12.4.js\"&gt;&lt;\/script&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;script type=\"text\/javascript\" src=\"https:\/\/code.jquery.com\/ui\/1.12.1\/jquery-ui.js\"&gt;&lt;\/script&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/js\/bootstrap.min.js\" integrity=\"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;<\/code><\/pre>\n<p>Yll\u00e4 olevassa HTML: ss\u00e4 olen antanut hakukent\u00e4lle id &quot;fnames&quot;. T\u00e4ll\u00e4 tunnuksella kutsuisin automaattisen t\u00e4ydennyksen menetelm\u00e4\u00e4.<\/p>\n<p>Seuraavaksi kirjoitetaan JavaScript-koodi, joka k\u00e4ytt\u00e4\u00e4 automaattista t\u00e4ydennysmenetelm\u00e4\u00e4, soita ajax-tiedostolle, napauta vastaus ajax-tiedostosta ja liit\u00e4 hakukentt\u00e4\u00e4n.<\/p>\n<pre><code>&lt;script type=\"text\/javascript\"&gt;\n\u00a0\u00a0\u00a0\u00a0$(function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(\"#fnames\").autocomplete({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0source: function(term, response){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.getJSON('search.php', { q: term }, function(data){ response(data); });\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n&lt;\/script&gt;<\/code><\/pre>\n<p>Vuonna <code>search.php<\/code>tiedosto, meid\u00e4n t\u00e4ytyy noutaa tietueita tietokannasta, rakentaa l\u00e4ht\u00f6 array-muodossa ja lopulta k\u00e4ytt\u00e4\u00e4 <code>json_encode<\/code>koodaamaan jono. \u00c4l\u00e4 unohda k\u00e4ytt\u00e4\u00e4, <code>json_encode<\/code>muuten et saa odotettua tulosta.<\/p>\n<pre><code>&lt;?php\n$q = $_REQUEST['q']['term'];\n\u00a0\n\/\/search in the database and get the result.\n\/\/for e.x. your database result is ['sam', 'sandy']\n\/\/json_encode the final output\necho json_encode(['sam', 'sandy']);\n?&gt;<\/code><\/pre>\n<p>Toivon, ett\u00e4 ymm\u00e4rr\u00e4t kuinka k\u00e4ytt\u00e4\u00e4 jQuery Autocomplete\u00e4 Ajaxin kanssa PHP: ss\u00e4. Haluamme kuulla ajatuksesi alla olevassa kommenttiosassa.<\/p>\n<h4>Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/ajax-tiedostojen-lataus-php-lla-ja-jquerylla\/\" title=\"Ajax-tiedostojen lataus PHP: ll\u00e4 ja jQueryll\u00e4\">Ajax-tiedostojen lataus PHP: ll\u00e4 ja jQueryll\u00e4<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/useita-valintaruutuja-valitse-poista-valinta-kayttamalla-jquerya\/\" title=\"Useita valintaruutuja Valitse \/ poista valinta k\u00e4ytt\u00e4m\u00e4ll\u00e4 jQuery\u00e4\">Useita valintaruutuja Valitse \/ poista valinta k\u00e4ytt\u00e4m\u00e4ll\u00e4 jQuery\u00e4<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>jQuery Autocomplete -laajennus toimii kuten Google-haku. T\u00e4ss\u00e4 viestiss\u00e4 tutkitaan, miten jQuery-automaattista t\u00e4ydennyst\u00e4 k\u00e4ytet\u00e4\u00e4n Ajaxin kanssa. K\u00e4yt\u00e4mme PHP: t\u00e4 palvelinpuolen kielen\u00e4.<\/p>\n","protected":false},"author":1,"featured_media":21654,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[257],"tags":[843],"class_list":["post-24381","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-6","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/24381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=24381"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/24381\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/21654"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=24381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=24381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=24381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}