This article mainly introduced the thinkphp realization Ajax Imitation official website search function method, the example demonstrates the background query function and the foreground Ajax submits the search data the method, is very practical skill, needs the friend can refer to the next
In this paper, we describe the method of thinkphp realizing Ajax imitation official website search function. Share to everyone for your reference.
The implementation method is as follows:
Background code:
Search, if at 1 not 0 function search () { $keyword = $_post[' search '); $Goods =m (' Goods '); Here I do a fuzzy query to the name or the corresponding ID, the main purpose because I this system is //mall system used to directly look at the product ID $map [' goods_id|goods_name '] = Array (' Like ', ' % '. $keyword. ' %'); Pass the query condition into the Query method if ($goods = $Goods->where ($map)->select ()) { $this->ajaxreturn ($goods, ' query succeeded ! ', 1); } else{ $this->ajaxreturn ($data, "Query failed, data does not exist! ", 0); } }
Front-End Code:
$ (document). Ready (function () {$ (". Show_message"). Hide (); var $search =$ (' #search_box '); $ ("#submit_from"). Click (function () {if ("#search_box"). attr ("value") = = ') {//alert (' Please enter text! '); $ (". Show_message"). HTML (' ERROR hint: Search box text cannot be empty! '); $ (". Show_message"). FadeIn (1000); $ (". Show_message"). FadeOut (1000); $search. focus (); return false; }else{//Start Ajax execution Data $.ajax ({type: "POST", url: "/index.php/goods/search", data:{search: $search. val ()}, DataType: "JSON", success: function (data) {if (data.status = = 1) {//alert (data.info); var html= '; $.each (Data.data,function (no,items) {html+= "; }); html+= "' +items.goods_id+ ' +items.goods_name+ ' +items.add_time+ ' +items.brand+ ' +items.price+ '"; $ (". Goods-list"). HTML ("). HTML (HTML); alert (HTML); } else if (Data.status = = 0) {$ (". Show_message"). Show (); $ (". Show_message"). HTML (data.info); $ (". Show_message"). FadeOut (3000); alert (data.info); return false; } } }); } }); });
The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!