groner · August 27, 2010 06:59
diff --git a/gistfile1.html b/gistfile1.html
 <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ng="http://angularjs.org">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
  
    <title>Filtering Select Experiment</title>
    <style type="text/css" media="screen">
      .rel {
        position: relative;
      }
      .w > * {
        display: block;
        width: 20em;
      }
      .w > select {
      }
    </style>
    <script src="angular-debug.js" type="text/javascript" ng:autobind="autobind"></script>
    <script type="text/javascript" charset="utf-8">
      function IdleCaller(timeout, func, scope) {
        this.timeout = timeout;
        this.func = func;
        this.scope = scope;
        this.activity = 0;
      }
      IdleCaller.prototype = {
        fire: function() {
          this.arguments = arguments;
          this.activity++;
          var self = this;
          window.setTimeout(function() { 
              if (--self.activity == 0)
                self.func.apply(this.scope, arguments);
            }, this.timeout);
        }
      };
      function Controller() {
        this.store = this.$resource('/persons.json', {}, {
            search: {method:'GET'}
          });
        this.persons = this.store.search();
        this.update_search_on_timeout = new IdleCaller(300, this.update_search, this);
      }
      Controller.prototype = {
        search_result: { items: [] },
        update_search: function() {
          var names = this.person_search.split(/[\s,]+/);
          this.search_result = this.store.search({name:names[0]+'*'});
        }
      };
    </script>
  </head>
  <body>
    <div class="w rel" ng:controller="Controller">
      <input type="text" name="person_search" ng:change="update_search_on_timeout.fire();" />
      <select size="10" name="person">
        <option ng:repeat="item in search_result.items" value="{{ item.id }}">{{ item.label }}</option>
      </select>
    </div>
  </body>
 </html>
diff --git a/persons.json b/persons.json
 {
 "items":
 [
  {
   "id": 5, 
   "label": "Bob"
  }, 
  {
   "id": 2282, 
   "label": "Bert"
  }
 ], 
 "length": 20, 
 "params": 
 {
  "name": "B*"
 }, 
 "path": "/persons.json"
 }
	<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ng="http://angularjs.org">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">

	<title>Filtering Select Experiment</title>
	<style type="text/css" media="screen">
	.rel {
	position: relative;
	}
	.w > * {
	display: block;
	width: 20em;
	}
	.w > select {
	}
	</style>
	<script src="angular-debug.js" type="text/javascript" ng:autobind="autobind"></script>
	<script type="text/javascript" charset="utf-8">
	function IdleCaller(timeout, func, scope) {
	this.timeout = timeout;
	this.func = func;
	this.scope = scope;
	this.activity = 0;
	}
	IdleCaller.prototype = {
	fire: function() {
	this.arguments = arguments;
	this.activity++;
	var self = this;
	window.setTimeout(function() {
	if (--self.activity == 0)
	self.func.apply(this.scope, arguments);
	}, this.timeout);
	}
	};
	function Controller() {
	this.store = this.$resource('/persons.json', {}, {
	search: {method:'GET'}
	});
	this.persons = this.store.search();
	this.update_search_on_timeout = new IdleCaller(300, this.update_search, this);
	}
	Controller.prototype = {
	search_result: { items: [] },
	update_search: function() {
	var names = this.person_search.split(/[\s,]+/);
	this.search_result = this.store.search({name:names[0]+'*'});
	}
	};
	</script>
	</head>
	<body>
	<div class="w rel" ng:controller="Controller">
	<input type="text" name="person_search" ng:change="update_search_on_timeout.fire();" />
	<select size="10" name="person">
	<option ng:repeat="item in search_result.items" value="{{ item.id }}">{{ item.label }}</option>
	</select>
	</div>
	</body>
	</html>
	{
	"items":
	[
	{
	"id": 5,
	"label": "Bob"
	},
	{
	"id": 2282,
	"label": "Bert"
	}
	],
	"length": 20,
	"params":
	{
	"name": "B*"
	},
	"path": "/persons.json"
	}