javascript - jQuery Json filter with search input without using any filter plugin -


i able show json data in html view, how can filter json data list based on firstname type in search input box, please me new javascript & jquery.

html

<input type="search" name="search" id="search" value="" /> <div id="placeholder"></div>

javascript/jquery

var data={"users":[         {             "firstname":"ray",             "lastname":"villalobos",             "joined": {                 "month":"january",                 "day":12,                 "year":2012             }         },         {             "firstname":"john",             "lastname":"jones",             "joined": {                 "month":"april",                 "day":28,                 "year":2010             }         } ]}  $(data.users).each(function() {     var output = "<ul><li>" + this.firstname + " " + this.lastname + "--" + this.joined.month+"</li></ul>";     $('#placeholder').append(output); });

here fiddle.

you can use following 

var data = {      "users": [{          "firstname": "ray",              "lastname": "villalobos",              "joined": {              "month": "january",                  "day": 12,                  "year": 2012          }      }, {          "firstname": "john",              "lastname": "jones",              "joined": {              "month": "april",                  "day": 28,                  "year": 2010          }      }]  }    $(data.users).each(function () {      var output = "<ul><li>" + this.firstname + " " + this.lastname + "--" + this.joined.month + "</li></ul>";      $('#placeholder').append(output);  });  $('#search').change(function () {      var yourtext = $(this).val();      if (yourtext.length > 0) {          $("li:contains(" + yourtext + ")").addclass('notify');      }      else{          $("li:contains(" + yourtext + ")").removeclass('notify');      }  });
.notify{      border: 1px solid red;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type="search" name="search" id="search" value="" />  <div id="placeholder"></div>

up dated 

var data = {      "users": [{          "firstname": "ray",              "lastname": "villalobos",              "joined": {              "month": "january",                  "day": 12,                  "year": 2012          }      }, {          "firstname": "john",              "lastname": "jones",              "joined": {              "month": "april",                  "day": 28,                  "year": 2010          }      }]  }    $(data.users).each(function () {      var output = "<ul><li>" + this.firstname + " " + this.lastname + "--" + this.joined.month + "</li></ul>";      $('#placeholder').append(output);  });  $('#search').keyup(function () {      var yourtext = $(this).val();      if (yourtext.length > 0) {          $("li:not(:contains(" + yourtext + "))").hide();      }      else{                    $("li").show();      }  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type="search" name="search" id="search" value="" />  <div id="placeholder"></div>

up dated 2 

var data = {      "users": [{          "firstname": "ray",              "lastname": "villalobos",              "joined": {              "month": "january",                  "day": 12,                  "year": 2012          }      }, {          "firstname": "john",              "lastname": "jones",              "joined": {              "month": "april",                  "day": 28,                  "year": 2010          }      }]  }    $(data.users).each(function () {      var output = "<ul><li>" + this.firstname + " " + this.lastname + "--" + this.joined.month + "</li></ul>";      $('#placeholder').append(output);  });  $('#search').keyup(function () {      var yourtext = $(this).val();      if (yourtext.length > 0) {          var abc = $("li").filter(function () {              var str = $(this).text();              var re = new regexp(yourtext, "i");              var result = re.test(str);              if (!result) {                  return $(this);              }          }).hide();      } else {          $("li").show();      }  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type="search" name="search" id="search" value="" />  <div id="placeholder"></div>


Comments

Post a Comment

Popular posts from this blog

How to connect android app to App engine -

i'm trying connect app in android server i've opened on appengine. my server's name : dddd-daniel-2345 , website server : http://dddd-daniel-2345.appspot.com/ this how connect android app server in app engine: app.yaml: application: dddd-daniel-2345 version: 1 runtime: python27 api_version: 1 threadsafe: yes handlers: - url: .* script: main.app libraries: - name: webapp2 version: "2.5.2" main.py: #!/usr/bin/env python # # copyright 2007 google inc. google.appengine.api import users import webapp2 class userhandler(webapp2.requesthandler): def get(self): user = users.get_current_user() if user: greeting = ('%s,%s,%s' % (user.email(),user.user_id(),user.nickname())) else: greeting = ('not logged in') self.response.out.write(greeting) app = webapp2.wsgiapplication([('/', userhandler),], debug=true) my applications code : add manifast main....
Read more

gcc - MinGW's ld cannot perform PE operations on non PE output file -

i know there other similar questions out there, stackoverflow or not. i've researched lot this, , still didn't find single solution. i'm doing operative system side project. i've been doing in assembly, wanna join c code. test, made assembly code file (called test.asm): [bits 32] global _a section .text _a: jmp $ then made c file (called main.c): extern void a(void); int main(void) { a(); } to link, used file (called make.bat): "c:\mingw\bin\gcc.exe" -ffreestanding -c -o c.o main.c nasm -f coff -o asm.o test.asm "c:\mingw\bin\ld.exe" -ttext 0x100000 --oformat binary -o out.bin c.o asm.o pause i've been researching ages, , i'm still struggling find answer. hope won't flagged duplicate. acknowledge existence of similar questions, have different answers, , none work me. question: what doing wrong? old mingw versions had problem "ld" not able create non-pe files @ all. maybe current versions...
Read more

php - display validation error message next to the textbox in codeigniter -

Image
i'm newbie codeigniter.i want display error message next text box.my view file create.php contains following code. <?php echo validation_errors(); //validation echo form_open('news/create'); //create form ?> <div class="boxes"> <div class="common"> <div class="lables"> <label for="name">name</label> </div> <div class="text_boxes"> <input type="text" name="uname" /><div id="infomessage"><?php echo $message;?></br> </div> </div>` and below controller model: public function create() { $this->load->helper('form'); $this->load->library('form_validation'); $data['title'] = 'insert items'; $this->form_validation->set_rules('uname','required|min_length[6]|m...
Read more