{"id":28111,"date":"2021-05-17T11:21:00","date_gmt":"2021-05-17T08:21:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28111"},"modified":"2021-10-17T04:51:51","modified_gmt":"2021-10-17T01:51:51","slug":"hur-man-anvander-jquery-autofullstandig-med-ajax","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-anvander-jquery-autofullstandig-med-ajax\/","title":{"rendered":"Hur man anv\u00e4nder jQuery Autofullst\u00e4ndig med Ajax"},"content":{"rendered":"

Vill du integrera jQuery Autocomplete p\u00e5 din webbplats? jQuery Autocomplete \u00e4r som Google-s\u00f6kning d\u00e4r en anv\u00e4ndare skriver in bokst\u00e4ver och resultatupps\u00e4ttning som matchas med skrivna bokst\u00e4ver fylls i i f\u00f6rv\u00e4g.<\/p>\n

jQuery UI<\/a> tillhandah\u00e5ller funktionen Autoslutf\u00f6rande. F\u00f6r att anv\u00e4nda den h\u00e4r funktionen m\u00e5ste du anv\u00e4nda JS- och CSS-filer som tillhandah\u00e5lls av dem.<\/p>\n

I den h\u00e4r korta handledningen tar vi ett litet exempel och visar dig hur du anv\u00e4nder jQuery Autocomplete med Ajax.<\/p>\n

Som ett exempel, l\u00e5t oss ta ett textf\u00e4lt. N\u00e4r en anv\u00e4ndare b\u00f6rjar skriva in en bokstav i det h\u00e4r f\u00e4ltet ska f\u00f6rfyllda data visas som anv\u00e4ndaren kan v\u00e4lja en specifik.<\/p>\n

Hur man anv\u00e4nder jQuery Autocomplete med Ajax<\/h3>\n

L\u00e5t oss s\u00e4ga att v\u00e5rt textf\u00e4lt \u00e4r f\u00f6r en anv\u00e4ndares f\u00f6rnamn. Du m\u00e5ste s\u00f6ka efter f\u00f6rnamnet och register \u00f6ver namnen lagras i databasen.<\/p>\n

Skapa en index.html<\/code>fil och l\u00e4gg till koden nedan i den.<\/p>\n

<html>\n<head>\n\u00a0\u00a0\u00a0\u00a0<title>jQuery Autocomplete<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/css\/bootstrap.min.css\" integrity=\"sha384-Vkoo8x4CGsO3+Hhxv8T\/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh\" crossorigin=\"anonymous\">\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" type=\"text\/css\" href=\"\/\/code.jquery.com\/ui\/1.12.1\/themes\/base\/jquery-ui.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-md-2\"><\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-md-8\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleInputFname\">First Name<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" class=\"form-control\" id=\"fnames\" placeholder=\"First Name\" name=\"fname\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-md-2\"><\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<script type=\"text\/javascript\" src=\"https:\/\/code.jquery.com\/jquery-1.12.4.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script type=\"text\/javascript\" src=\"https:\/\/code.jquery.com\/ui\/1.12.1\/jquery-ui.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/js\/bootstrap.min.js\" integrity=\"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6\" crossorigin=\"anonymous\"><\/script>\n<\/body><\/code><\/pre>\n
I ovanst\u00e5ende HTML har jag gett id "fnames" till s\u00f6krutan. P\u00e5 detta id skulle jag kalla metoden f\u00f6r autoslutf\u00f6rande.<\/p>\n
L\u00e5t oss sedan skriva JavaScript-kod som anv\u00e4nder autoslutf\u00f6ringsmetoden, ringa ajax-filen, ta svaret fr\u00e5n ajax-filen och l\u00e4gg till s\u00f6krutan.<\/p>\n
<script type=\"text\/javascript\">\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<\/script><\/code><\/pre>\n
I search.php<\/code>filen m\u00e5ste vi h\u00e4mta poster fr\u00e5n databasen, bygga utdata i matrisformat och slutligen anv\u00e4nda f\u00f6r json_encode<\/code>att koda matrisen. Gl\u00f6m inte att anv\u00e4nda json_encode<\/code>annars kommer du inte att f\u00e5 den f\u00f6rv\u00e4ntade effekten.<\/p>\n
<?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?><\/code><\/pre>\n
Jag hoppas att du f\u00f6rst\u00e5r hur du anv\u00e4nder jQuery Autocomplete med Ajax i PHP. Vi vill h\u00f6ra dina tankar i kommentarsektionen nedan.<\/p>\n
relaterade artiklar<\/h4>\n