{"id":24701,"date":"2021-05-17T11:04:00","date_gmt":"2021-05-17T08:04:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24701"},"modified":"2021-10-17T19:07:25","modified_gmt":"2021-10-17T16:07:25","slug":"jquery-automaatse-taitmise-kasutamine-ajaxiga","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/jquery-automaatse-taitmise-kasutamine-ajaxiga\/","title":{"rendered":"JQuery automaatse t\u00e4itmise kasutamine Ajaxiga"},"content":{"rendered":"<p>Kas soovite oma veebisaidile integreerida jQuery Autocomplete? jQuery automaatne t\u00e4itmine on nagu Google&#8217;i otsing, kus kasutaja sisestab m\u00f5ned t\u00e4hed ja sisestatud t\u00e4htedega vastavusse seatud tulemuste komplekt on eelnevalt t\u00e4idetud.<\/p>\n<p><a href=\"https:\/\/jqueryui.com\/autocomplete\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">jQuery kasutajaliides<\/a> pakub automaatse t\u00e4itmise funktsiooni. Selle funktsiooni kasutamiseks peate kasutama nende pakutavaid JS- ja CSS-faile.<\/p>\n<p>Selles l\u00fchikeses \u00f5petuses v\u00f5tame v\u00e4ikese n\u00e4ite ja n\u00e4itame, kuidas kasutada jQuery Autocomplete&#8217;i Ajaxiga.<\/p>\n<p>V\u00f5tame n\u00e4iteks \u00fche tekstiv\u00e4lja. Kui kasutaja hakkab sellele v\u00e4ljale t\u00e4hte sisestama, peaksid ilmuma eelnevalt t\u00e4idetud andmed, millest kasutaja saab valida konkreetse.<\/p>\n<h3>JQuery automaatse t\u00e4itmise kasutamine Ajaxiga<\/h3>\n<p>Oletame, et meie tekstiv\u00e4li on kasutaja eesnimi. Peate otsima eesnime ja nimede kirjed salvestatakse andmebaasi.<\/p>\n<p>Looge <code>index.html<\/code>fail ja lisage sellesse allolev kood.<\/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>\u00dclalolevas HTML-is olen andnud otsingukastile id &quot;fnames&quot;. Sellel id-il nimetaksin automaatse t\u00e4itmise meetodit.<\/p>\n<p>Seej\u00e4rel kirjutame JavaScripti koodi, mis kasutab automaatse t\u00e4itmise meetodit, helistame ajax-failile, haarame vastuse ajax-failist ja lisame otsingukasti.<\/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>Kui <code>search.php<\/code>faili, peame tooma kirjed andmebaasi, ehitada v\u00e4ljund massiivi formaat ja l\u00f5puks kasutada <code>json_encode<\/code>kodeerida massiivi. \u00c4rge unustage seda kasutada, <code>json_encode<\/code>muidu ei saa te oodatud v\u00e4ljundit.<\/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>Loodan, et saate aru, kuidas kasutada jQuery Autocomplete&#8217;i koos Ajaxiga PHP-s. Tahaksime teie m\u00f5tteid kuulda allpool olevas kommentaaride jaotises.<\/p>\n<h4>seotud artiklid<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/ajaxi-failide-uleslaadimine-php-ja-jquery-abil\/\" title=\"Ajaxi failide \u00fcleslaadimine PHP ja jQuery abil\">Ajaxi failide \u00fcleslaadimine PHP ja jQuery abil<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/mitu-markeruutu-valige-tuhista-valimine-jquery-abil\/\" title=\"Mitu m\u00e4rkeruutu Valige \/ t\u00fchistage valik jQuery abil\">Mitu m\u00e4rkeruutu Valige \/ t\u00fchistage valik jQuery abil<\/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 automaatse t\u00e4itmise pistikprogramm t\u00f6\u00f6tab nagu Google&#8217;i otsing. Selles postituses uurime, kuidas kasutada jxuery automaatse t\u00e4itmise funktsiooni Ajax. Serveripoolse keelena kasutame PHP-d.<\/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":[256],"tags":[842],"class_list":["post-24701","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-5","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/24701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/comments?post=24701"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/24701\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media\/21654"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media?parent=24701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/categories?post=24701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/tags?post=24701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}