diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..14bc68c --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/nbproject/private/ \ No newline at end of file diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..fa9d6e5 --- /dev/null +++ b/_config.yml @@ -0,0 +1,5 @@ +title: Sselect. Input text field tips. jQuery plugin. +description: Drop-down list of hints for text input. +theme: jekyll-theme-cayman +show_downloads: true +google_analytics: diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index ea929d9..0000000 --- a/docs/index.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - Hello, world! - - -

Hello, world!

- - - - - - - - diff --git a/index.md b/index.md new file mode 100644 index 0000000..72afa7d --- /dev/null +++ b/index.md @@ -0,0 +1,104 @@ +# Sselect. Input text field tips. jQuery plugin. +## Drop-down list of hints for text input. + +## Install + +NPM: +```sh +$ npm i @balambasik/sselect +``` + +CDN: +```sh +https://cdn.jsdelivr.net/gh/balambasik/sselect/sselect.js +https://cdn.jsdelivr.net/gh/balambasik/sselect/sselect.css +``` +TAGS: +```sh + + +``` + + +## Use + +```sh + +``` + +```sh +$('#input-tips').sselect({ + data: [], + placeholder: 'Placeholder', + text_noresults: 'Not results', + prepLi: function() {}, + prepSelectedLi: function() {}, + prepQuery: function() {}, + onInput: function() {}, + onSelect: function() {}, + onNoresults: function() {}, + onShow: function() {}, + onClose: function() {} +}); +``` + +### data +```sh +var data = ['foo', 'bar', 'baz']; // tips array + +$('#input-tips').sselect({ + data: data, // tips data +}); +``` + +### prep +```sh +// +var data = [ + ['foo', 'bar'], + ['foo1', 'bar1'], + ['foo2', 'bar2'], +]; + +$('#input-tips').sselect({ + + // prep item var data + prepLi: function(item) { + if ($.isArray(item)) { + return '
  • ' + item.join(',') + '
  • '; + } + return '
  • ' + item + '
  • '; + }, + + // selected li elem + prepSelectedLi: function($li){ + return $li.text(); + }, + + // prep query string + prepQuery: function(query){ + return query.trim(); + }, +}); +``` + +### events +```sh +$('#input-tips').sselect({ + onInput: function(query) { + console.log(query); + }, + onSelect: function(selected_text) { + console.log(selected_text); + }, + onNoresults: function() { + // No results + }, + onShow: function() { + // Show tips drop menu + }, + onClose: function() { + // Close tips drop menu + } +}); +``` diff --git a/package.json b/package.json deleted file mode 100644 index 430f17d..0000000 --- a/package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "name": "@balambasik/sselect", "version": "1.0.1", "description": "Input text field tips. jQuery plugin.", "main": "sselect.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, "keywords": [ - "input" - ], "author": "balambasik@gmail.com", "license": "MIT" -} diff --git a/sselect.css b/sselect.css deleted file mode 100644 index 55f1f61..0000000 --- a/sselect.css +++ /dev/null @@ -1,32 +0,0 @@ -.sselect-wrap{ - position: relative; -} - -.sselect-box{ - position: absolute; - border: 1px solid #D0D0D0; - padding: 5px; - box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.45); - border-radius: 3px; -} - -.sselect-li{ - border-radius: 3px; - padding: 5px; - background: #fff; - list-style: none; - cursor: pointer; - color: #5A5A5A; - transition: all .2s; -} - -.sselect-li:hover{ - background: #1C91FC; - color: #fff; -} - -.sselect-li-noresults{ - list-style: none; - text-align: center; - color: #D0D0D0; -} \ No newline at end of file diff --git a/sselect.js b/sselect.js deleted file mode 100644 index 680973b..0000000 --- a/sselect.js +++ /dev/null @@ -1,162 +0,0 @@ -(function(factory) { - if (typeof define === 'function' && define.amd) { - // AMD (Register as an anonymous module) - define(['jquery'], factory); - } else if (typeof exports === 'object') { - // Node/CommonJS - module.exports = factory(require('jquery')); - } else { - // Browser globals - factory(jQuery); - } -}(function($) { - $.fn.sselect = function(options, data) { - - var self = this; - - var settings = $.extend({ - data: [], - placeholder: '', - text_noresults: 'Not results', - prepLi: prepLi, - prepSelectedLi: prepSelectedLi, - onInput: function() {}, - onSelect: function() {}, - onNoresults: function() {}, - onShow: function() {}, - onClose: function() {} - }, options); - - - if (options === 'setData') { - settings.data = data; - } - - - function prepInput() { - $(self).attr('autocomplete', 'off'); - - if (settings.placeholder) { - $(self).attr('placeholder', settings.placeholder); - } - - $(self).wrap("
    "); - } - - function prepLi(item) { - - if ($.isArray(item)) { - return '
  • ' + item.join(',') + '
  • '; - } - - return '
  • ' + item + '
  • '; - } - - function prepSelectedLi($li) { - return $li.text(); - } - - function insertSearchBox() { - - var input_w = $(self).outerWidth(); - var input_h = $(self).outerHeight(); - - $('.sselect-wrap').append(''); - - $('.sselect-box').css({ - position: 'absolute', - width: input_w + 'px', - top: input_h + 5 + 'px', - left: 0, - display: 'none' - }); - } - - function search(item, query) { - - var ret = false; - - if (typeof item === "string") { - return (item.indexOf(query) !== -1); - } - - // search from array - $.each(item, function(i, str) { - if (str.indexOf(query) !== -1) { - ret = true; - return; - } - }); - - return ret; - } - - function insertLi(query) { - - var query = query || ''; - var html = ''; - - $.each(settings.data, function(i, item) { - - if (!query) { - html += settings.prepLi(item); - } else if (search(item, query)) { - html += settings.prepLi(item); - } - }); - - if (html) { - $('.sselect-box').html(html); - } else { - $('.sselect-box').html('
  • ' + settings.text_noresults + '
  • '); - settings.onNoresults(query); - } - } - - // Init -------------------------------------------------------- - - prepInput(); - insertSearchBox(); - insertLi(); - - // Events -------------------------------------------------------- - - // search - $(this).on('input paste focus', function() { - var query = $(this).val().trim(); - insertLi(query); - settings.onInput(query); - }); - - // show - $(this).on('focus', function() { - $('.sselect-box').show(); - settings.onShow(); - }); - - // hide - $(document).click(function(event) { - - if ($(event.target).closest(".sselect-box").length || $(event.target).hasClass('input-text')) { - return; - } - - $(".sselect-box").hide(); - event.stopPropagation(); - settings.onClose(); - }); - - // click li - $(document).on('click', '.sselect-li', function() { - - var li_text = settings.prepSelectedLi($(this)); - - $(self).val(li_text); - $('.sselect-box').hide(); - settings.onSelect(li_text); - }); - - return this; - }; - -})); \ No newline at end of file diff --git a/sselect.min.css b/sselect.min.css deleted file mode 100644 index df3a97f..0000000 --- a/sselect.min.css +++ /dev/null @@ -1 +0,0 @@ -.sselect-wrap{position:relative}.sselect-box{position:absolute;border:1px solid #d0d0d0;padding:5px;box-shadow:3px 3px 5px 0 rgba(0,0,0,.45);border-radius:3px}.sselect-li{border-radius:3px;padding:5px;background:#fff;list-style:none;cursor:pointer;color:#5a5a5a;transition:all .2s}.sselect-li:hover{background:#1c91fc;color:#fff}.sselect-li-noresults{list-style:none;text-align:center;color:#d0d0d0} \ No newline at end of file diff --git a/sselect.min.js b/sselect.min.js deleted file mode 100644 index 8b1c162..0000000 --- a/sselect.min.js +++ /dev/null @@ -1 +0,0 @@ -!function(e){"function" == typeof define && define.amd?define(["jquery"], e):"object" == typeof exports?module.exports = e(require("jquery")):e(jQuery)}(function(r){r.fn.sselect = function(e, t){var o, s, n = this, c = r.extend({data:[], placeholder:"", text_noresults:"Not results", prepLi:function(e){if (r.isArray(e))return'
  • ' + e.join(",") + "
  • "; return'
  • ' + e + "
  • "}, prepSelectedLi:function(e){return e.text()}, onInput:function(){}, onSelect:function(){}, onNoresults:function(){}, onShow:function(){}, onClose:function(){}}, e); function l(l){l = l || ""; var i = ""; r.each(c.data, function(e, t){var o, s, n; l?(s = l, n = !1, ("string" == typeof (o = t)? - 1 !== o.indexOf(s):(r.each(o, function(e, t){ - 1 === t.indexOf(s) || (n = !0)}), n)) && (i += c.prepLi(t))):i += c.prepLi(t)}), i?r(".sselect-box").html(i):(r(".sselect-box").html('
  • ' + c.text_noresults + "
  • "), c.onNoresults(l))}return"setData" === e && (c.data = t), r(n).attr("autocomplete", "off"), c.placeholder && r(n).attr("placeholder", c.placeholder), r(n).wrap("
    "), o = r(n).outerWidth(), s = r(n).outerHeight(), r(".sselect-wrap").append(''), r(".sselect-box").css({position:"absolute", width:o + "px", top:s + 5 + "px", left:0, display:"none"}), l(), r(this).on("input paste focus", function(){var e = r(this).val().trim(); l(e), c.onInput(e)}), r(this).on("focus", function(){r(".sselect-box").show(), c.onShow()}), r(document).click(function(e){r(e.target).closest(".sselect-box").length || r(e.target).hasClass("input-text") || (r(".sselect-box").hide(), e.stopPropagation(), c.onClose())}), r(document).on("click", ".sselect-li", function(){var e = c.prepSelectedLi(r(this)); r(n).val(e), r(".sselect-box").hide(), c.onSelect(e)}), this}}); \ No newline at end of file