Best way to populate your favorites list with jQuery / Json?

Question

Our development team is currently using this template, but I can't help but wonder if there is a faster or more efficient html way to accomplish the same task.

HTML

<select id="myList" style="width: 400px;"> </select> <script id="myListTemplate" type="text/x-jQuery-tmpl"> <option value="${idField}">${name}</option> </script> 

And this is Javascript:

 function bindList(url) { callAjax(url, null, false, function (json) { $('#myList').children().remove(); $('#myListTemplate').tmpl(json.d).appendTo('#myList'); }); } 

Answer 1

This is a function that I wrote to do just that. I'm not sure if these are faster than jQuery templates. It creates and adds Option elements one at a time, which can be slower than Templates . I suspect that Templates builds the entire HTML string and then creates the DOM elements in just one snapshot. It could be faster. I believe that this feature can be configured to do the same . I worked with Templates, and I found that this function is easier to consume for something simple, like filling in the Select list, and it fits perfectly into my utility.js file.

Update:. I updated my function to first create the HTML code, and call append () only once. Now it works much faster. Thanks for posting this question, it's nice to be able to optimize your own code.

Function use

  // you can easily pass in response.d from an AJAX call if it JSON formatted var users = [ {id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 3, name: 'Cindy'} ] setSelectOptions($('#selectList'), users, 'id', 'name'); 

Function code

 // Fill a select list with options using an array of values as the data source // @param {String, Object} selectElement Reference to the select list to be modified, either the selector string, or the jQuery object itself // @param {Object} values An array of option values to use to fill the select list. May be an array of strings, or an array of hashes (associative arrays). // @param {String} [valueKey] If values is an array of hashes, this is the hashkey to the value parameter for the option element // @param {String} [textKey] If values is an array of hashes, this is the hashkey to the text parameter for the option element // @param {String} [defaultValue] The default value to select in the select list // @remark This function will remove any existing items in the select list // @remark If the values attribute is an array, then the options will use the array values for both the text and value. // @return {Boolean} false function setSelectOptions(selectElement, values, valueKey, textKey, defaultValue) { if (typeof (selectElement) == "string") { selectElement = $(selectElement); } selectElement.empty(); if (typeof (values) == 'object') { if (values.length) { var type = typeof (values[0]); var html = ""; if (type == 'object') { // values is array of hashes var optionElement = null; $.each(values, function () { html += '<option value="' + this[valueKey] + '">' + this[textKey] + '</option>'; }); } else { // array of strings $.each(values, function () { var value = this.toString(); html += '<option value="' + value + '">' + value + '</option>'; }); } selectElement.append(html); } // select the defaultValue is one was passed in if (typeof defaultValue != 'undefined') { selectElement.children('option[value="' + defaultValue + '"]').attr('selected', 'selected'); } } return false; }