Case-insensitive, accent folding typeahead

by Joshua Koudys

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

var Hello = React.createClass({
    mixins: [React.addons.LinkedStateMixin],
    convertAccents: function(str) {
      return str.replace(
        /([àáâãäå])|([ç])|([èéêë])|([ìíîï])|([ñ])|([òóôõöø])|([ß])|([ùúûü])|([ÿ])|([æ])/g,
        function(str,a,c,e,i,n,o,s,u,y,ae) {
          if(a) return 'a';
          else if(c) return 'c';
          else if(e) return 'e';
          else if(i) return 'i';
          else if(n) return 'n';
          else if(o) return 'o';
          else if(s) return 's';
          else if(u) return 'u';
          else if(y) return 'y';
          else if(ae) return 'ae';
        }
      );
    },
    getInitialState: function () {
        return {
            q: ''
        };
    },
    matchQuery: function(str) {
        return !this.state.q || (this.convertAccents(str).toLowerCase().indexOf(this.convertAccents(this.state.q).toLowerCase()) > -1);
    },
    render: function () {
        var stuff = ['foo', 'bar', 'baz'];
        var thingies = stuff.map(function(e, i) {
            if (this.matchQuery(e)) {
                return <p key={i}>{e}</p>;
            }
        }, this);
        return <div><input type="text" valueLink={this.linkState('q')} />{thingies}</div>;
    }
});

 
React.render(<Hello /> , document.body);