{"id":27930,"date":"2021-05-17T11:04:00","date_gmt":"2021-05-17T08:04:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27930"},"modified":"2021-10-18T03:44:24","modified_gmt":"2021-10-18T00:44:24","slug":"jak-korzystac-z-autouzupelniania-jquery-z-ajax","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/jak-korzystac-z-autouzupelniania-jquery-z-ajax\/","title":{"rendered":"Jak korzysta\u0107 z autouzupe\u0142niania jQuery z Ajax"},"content":{"rendered":"<p>Chcesz zintegrowa\u0107 autouzupe\u0142nianie jQuery ze swoj\u0105 stron\u0105 internetow\u0105? Autouzupe\u0142nianie jQuery przypomina wyszukiwark\u0119 Google, w kt\u00f3rej u\u017cytkownik wpisuje kilka liter, a dopasowanie wynik\u00f3w z wpisanymi literami jest wst\u0119pnie wype\u0142niane.<\/p>\n<p><a href=\"https:\/\/jqueryui.com\/autocomplete\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">jQuery UI<\/a> zapewnia funkcj\u0119 autouzupe\u0142niania. Aby skorzysta\u0107 z tej funkcji, musisz u\u017cy\u0107 dostarczonych przez nich plik\u00f3w JS i CSS.<\/p>\n<p>W tym kr\u00f3tkim samouczku we\u017amiemy ma\u0142y przyk\u0142ad i poka\u017cemy, jak u\u017cywa\u0107 autouzupe\u0142niania jQuery z Ajaxem.<\/p>\n<p>Jako przyk\u0142ad we\u017amy jedno pole tekstowe. Gdy u\u017cytkownik zacznie wpisywa\u0107 liter\u0119 w tym polu, powinny pojawi\u0107 si\u0119 wst\u0119pnie wype\u0142nione dane, z kt\u00f3rych u\u017cytkownik mo\u017ce wybra\u0107 konkretn\u0105.<\/p>\n<h3>Jak korzysta\u0107 z autouzupe\u0142niania jQuery z Ajax<\/h3>\n<p>Za\u0142\u00f3\u017cmy, \u017ce nasze pole tekstowe jest przeznaczone na imi\u0119 u\u017cytkownika. Musisz wyszuka\u0107 imi\u0119, a rekordy nazwisk s\u0105 przechowywane w bazie danych.<\/p>\n<p>Utw\u00f3rz <code>index.html<\/code>plik i dodaj do niego poni\u017cszy kod.<\/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>W powy\u017cszym kodzie HTML poda\u0142em id \u201efnames&quot; do pola wyszukiwania. Na tym id wywo\u0142a\u0142bym metod\u0119 autouzupe\u0142niania.<\/p>\n<p>Nast\u0119pnie napiszmy kod JavaScript, kt\u00f3ry u\u017cywa metody autouzupe\u0142niania, wywo\u0142aj plik ajax, pobierz odpowied\u017a z pliku ajax i do\u0142\u0105cz do pola wyszukiwania.<\/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>W <code>search.php<\/code>pliku musimy pobra\u0107 rekordy z bazy danych, zbudowa\u0107 wynik w formacie tablicy i na koniec u\u017cy\u0107 <code>json_encode<\/code>do zakodowania tablicy. Nie zapomnij u\u017cy\u0107, w <code>json_encode<\/code>przeciwnym razie nie uzyskasz oczekiwanego wyniku.<\/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>Mam nadziej\u0119, \u017ce rozumiesz, jak u\u017cywa\u0107 autouzupe\u0142niania jQuery z Ajaxem w PHP. Chcieliby\u015bmy pozna\u0107 Twoje przemy\u015blenia w sekcji komentarzy poni\u017cej.<\/p>\n<h4>Powi\u0105zane artyku\u0142y<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/pl\/przesylanie-plikow-ajax-za-pomoca-php-i-jquery\/\" title=\"Przesy\u0142anie plik\u00f3w Ajax za pomoc\u0105 PHP i jQuery\">Przesy\u0142anie plik\u00f3w Ajax za pomoc\u0105 PHP i jQuery<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/pl\/wielokrotne-pole-wyboru-wybierz-odznacz-za-pomoca-jquery\/\" title=\"Wielokrotne zaznaczenie\/odznaczenie za pomoc\u0105 jQuery\">Wielokrotne zaznaczenie\/odznaczenie za pomoc\u0105 jQuery<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wtyczka jQuery Autocomplete dzia\u0142a jak wyszukiwarka Google. W tym po\u015bcie uczymy si\u0119, jak u\u017cywa\u0107 autouzupe\u0142niania jQuery z Ajaxem. U\u017cywamy PHP jako j\u0119zyka po stronie serwera.<\/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":[259],"tags":[847],"class_list":["post-27930","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-8","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/27930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/comments?post=27930"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/27930\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media\/21654"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media?parent=27930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/categories?post=27930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/tags?post=27930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}