yields/select — pull request #53 by mnmly (2013-11-07 22:09:19+00:00)
Title: Update DOM reference when `opt.el` is added to DOM.

When `opt.el` is being added to the `this.opts`, it's better to update the reference of `opt.el` to the element being added to DOM tree, so that you can modify the list item element later.

-----
i.e when user searches, you may want to wrap the substring with span to highlight.

![](http://f.cl.ly/items/010R1g3B2d1n0h1U3i15/substring.gif)

Currently to make this work:

```javascript
var term = 'item';
var name = 'Item name';
var opt = select.get(name);
var pattern = new RegExp('(' + term + ')', 'i');
var substring = '$1';

for ( var i = 0; i < select.opts.children.length; i += 1 ) {
var existingEl = select.opts.children[i];
if (opt.el == existingEl) {
existingEl.innerHTML = opt.name.replace(pattern, substring);
opt.el = existingEl;
}
}
```

But with this fix, you can do:

```javascript
var term = 'item';
var name = 'Item name';
var opt = select.get(name);
var pattern = new RegExp('(' + term + ')', 'i');
var substring = '$1';

opt.el.innerHTML = opt.name.replace(pattern, substring);
```