jQuery implementation of fuzzy query practical case analysis-JS Tutorial-php.cn

This time I will bring youjQueryA practical case analysis of implementing fuzzy query. What are theprecautionsfor jQuery to implement fuzzy query? Here are the practical cases, let’s take a look.

Requirements:The list has a lot of content. The user needs to find some items in the list. Only the items that match the user input value are displayed. (There is nopagingin the background, and the direct asynchronous interface returns the content list formed by data addition)

Although it can be queried by passing parameters and then calling, the main record here is the front-end processing for fuzzy query. There is no need to call the interface's implementation method again.

html part:

列表一

列表二

列表三

列表四

列表五

00001

内容1

内容2

内容3

内容4
……

Copy after login

js part:

queryList: function(){ $(".search-input").on("input propertychange", function() { var queryStr = $.trim($(".search-input").val()); if(queryStr === ''){ $(".list-content li").show(); }else{ // 以下是匹配某些列的内容，如果是匹配全部列的话就把find()和.parent()去掉即可 $(".list-content li").hide().find(".code, .name").filter(":contains('"+queryStr+"')").parent("li").show(); //$(".list-content").refresh(); //重新刷新列表把隐藏的dom结构去掉。 } }); }

Copy after login

Analysis:The above is achieved The fuzzy query function of front-end js, haha. There is an additional input added to the listening event in the code. It is said to be compatible with iOS. I have not tested it specifically. If anyone has tested it, can you tell me? Thank you.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!