/** * jquery.autocomplete-with-id.js v1.0 * jQuery iPhone-like switch button * @author Antonio Veracruz Development * * Copyright (c) Antonio Veracruz Development - released under MIT License {{{ * * Permission is hereby granted, free of charge, to any person * obtaining a copy of this software and associated documentation * files (the "Software"), to deal in the Software without * restriction, including without limitation the rights to use, * copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the * Software is furnished to do so, subject to the following * conditions: * The above copyright notice and this permission notice shall be * included in all copies or substantial portions of the Software. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR * OTHER DEALINGS IN THE SOFTWARE. * }}} */ /* * Meant to be used on a , this widget will replace the receiver element with an iPhone-style * switch button with two states: "on" and "off". * Labels of the states are customizable, as are their presence and position. The receiver element's "checked" attribute * is updated according to the state of the switch, so that it can be used in a
. * */ (function ($) { $.widget("sylightsUI.autocompleteWithId", { options: { url: null, data_type: "json", method: "get", show_labels: true, placeholder: "", hint: "", value_property: "id", label_property: "name", clear: true, clear_after: null, css_text_container: null, css_label_container: null }, _create: function () { this._initControl(); this._initPluginEvents(); }, _initControl: function () { if ($.controls == undefined || $.controls == null){ $.controls = {} } var self = this; // Create our objects: two labels and the button self.id_container = self.element; self.label_container = $(""); self.text_container = $("").attr("type", "text"); self.text_container.attr("class", self.id_container.attr("class")); self.parent_container = $("#" + self.id_container.attr("parent")); self.search_property = self.id_container.attr("search-property") || "keyword"; self.value = self.id_container.attr("value"); self.label = self.id_container.attr("label"); self.defaultValue = self.value; self.defaultLabel = self.label; self.placeholder = self.id_container.attr("placeholder"); self.hint = self.id_container.attr("hint"); self.property_name = self.id_container.attr("property-name"); self.editMode = false; $.controls[self.id_container.attr("id")] = self; self.setDefault = function(){ self._setDefaultValue(); //console.log("Set Default OK"); self._refresh(); return false; }; self.nullify = function(){ self._nullifyValue(); //console.log("Nullify OK"); self._refresh(); return false; }; //alert("Label: " + self.label); // Insert the objects into the DOM self.text_container.insertAfter(self.id_container).hide(); self.label_container.insertAfter(self.text_container); self.text_container.addClass(self.options.css_text_container); if (self.id_container.attr("url") != null) { self.options.url = self.id_container.attr("url"); } if (self.id_container.attr("method") != null) { self.options.method = self.id_container.attr("method"); } if (self.id_container.attr("placeholder") != null) { self.options.placeholder = self.id_container.attr("placeholder"); } if (self.id_container.attr("hint") != null) { self.options.hint = self.id_container.attr("hint"); } if (self.id_container.attr("value-property") != null) { self.options.value_property = self.id_container.attr("value-property"); //console.log("Value Property: " + self.options.value_property); } if (self.id_container.attr("label-property") != null) { self.options.label_property = self.id_container.attr("label-property"); //console.log("Label Property: " + self.options.label_property); } self.menu_is_open = false; // Insert a clearing element after the specified element if needed if (self.options.clear) { $("
").css({ clear: "left" }).insertAfter(self.options.clear_after); } // Call refresh to update labels text and visibility self._refresh(); }, _refresh: function () { var self = this; //alert("Label: " + this.label + "; Placeholder: " + this.placeholer ); if (self.editMode) { // edit mode self.text_container.val(self.label); self.label_container.hide(); self.text_container.show(); self.text_container.focus(); } else { //label mode self.label_container.html(self.label || self.placeholder); self.text_container.hide(); self.label_container.show(); } }, _initEvents: function () { var self = this; }, _initPluginEvents: function () { var self = this; self.label_container.click(function () { self.editMode = true; self._refresh(); }); self.text_container.focusout( function(){ new_text_value = self.text_container.val().trim(); if ( new_text_value == ""){ self.value = null; self.label = null; self.id_container.val(""); } self.editMode = false; self._refresh() } ); self.text_container.autocomplete({ delay: 0, source: function (request, response) { var ajax_params = {}; ajax_params[self.search_property] = request.term; if (this.parent_container != null) { ajax_params[this.parent_container.attr('property-name')] = this.parent_container.attr('value'); } $.ajax({ url: self.options.url, dataType: "json", data: ajax_params, beforeSend: function (xhr) { xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content')); }, success: function (data) { //alert(jQuery.toJSON(data)); if (data.status == 2) { //console.log("Autocompelete Result: " + $.toJSON(data.data)); response($.map(data.data, function (item) { //console.log("Label Property: " + self.options.label_property); //console.log("Value Property: " + self.options.value_property); return { label: item[self.options.label_property], value: item[self.options.value_property] } })); } } }); }, //minLength: 2, select: function (event, ui) { self.value = ui.item.value; self.label = ui.item.label; self.id_container.val(self.value); self.text_container.val(self.label); self.editMode = false; // label model self._refresh(); return false; }, open: function () { self.menu_is_open = true; }, close: function () { self.menu_is_open = false; } }); }, _setDefaultValue: function(){ var self = this; self.id_container.val(self.defaultValue); self.label = self.defaultLabel; self.value = self.defaultValue; }, _nullifyValue: function(){ var self = this; self.id_container.val(null); self.label = null; self.value = null; } }); })(jQuery);