TextAssist

Getting started with TextAssist

In order to use TextAssist, you must include the JavaScript file on your website.

1. Download the code and copy the file(in dist directory) to your project.
2. Include like below in your HTML.

<script src="path/to/textassist.js"></script>
<script src="path/to/your.js"></script>

Demo

Simple

var textarea = document.getElementById('some-id');
var textassist = new TextAssist(textarea, {
  find: function(term, callback) {
    callback(['contents', 'that', 'were', 'filtered', 'by', 'term']);
  }
});
  

Customized

var textarea = document.getElementById('some-id');
var textassist = new TextAssist(textarea, {
  find: function(term, callback) {
    // You can use ajax to get data from server.
    // This example just to make it look like using ajax.
    setTimeout(function() {
      callback(filterData(term));
    }, 300);
  },
  ulClassName: 'dropdown-menu',
  anchorClassName: 'dropdown-item',
  activeClassName: 'active',
  item: function(source, term) {
    // You can make your own HTML to show the value.
    var capitalized = term;
    if (capitalized) {
      capitalized = term.charAt(0).toUpperCase() + term.slice(1);
    }
    return source.replace(capitalized, '<u>' + capitalized + '</u>');
  },
  loadingHTML: '<img src="xxx.gif" /><span>Now loading...</span>',
  noneHTML: '<img src="yyy.png" /><span>Nothing found.</span>'
});
  

jQuery

// Also, you can use with jQuery!
$('#demo3').textassist({
  find: function(term, callback) {
    callback(filterData(term));
  },
  beforeFix: function(source) {
    return '"' + source + '"';
  },
  afterFix: function(value) {
    console.log('Applied value = ' + value);
  }
});
  

Documentation

DOM Structure of suggestion area

<ul>
  <li>
    <a>value</a>
  </li>
</ul>

Constructor

var textassist = new TextAssist(
  element,   // HTMLElement. Must be textarea!
  options    // Options. See next description.
);

Options

var options = {
  // [Required function]
  find: function(term, callback) {
    // Implement getting data and passing data to callback.
    // 'term' is string for filtering data. 
    // 'callback' is function to process next. Accepts only array as the argument.
    // Example:
    return ['some', 'data', 'filtered', 'by', 'term'];
  },
  // [Class name for <UL>]
  ulClassName: null,     // If you use Bootstrap, set 'dropdown-menu'.
  // [Class name for <LI>]
  liClassName: null,
  // [Class name for <A>]
  anchorClassName: null, // If you use Bootstrap, set something.
  // [Class name for <LI> when it is selected]
  activeClassName: null, // If you use Bootstrap, set 'active'.
  // [Optional function]
  item: function(source, term) {
    // Implement making content html.
    // 'source' is string for suggestion.
    // 'term' is same value of `find` function.
    // Default implementaion is:
    return value;
  },
  // [HTML that is shown when preparing values]
  loadingHTML: '<a href="javasript:void(0)">Loading...</a>',
  // [HTML that is shown when there are no values]
  noneHTML: '<a href="javasript:void(0)">No items...</a>',
  // [Delay time for firing suggestion event]
  delayMills: 200,
  
  // [Event before fixing the selection]
  beforeFix: function(source) {
    // 'source' is the value to be applied to textarea.
    // You can change 'source' to another value.
    // Default implementation is:
    return source;
  },
  // [Event after fixing the selection]
  afterFix: function(value) {
    // 'value' is the value applied to textarea.
    // Default is NOOP.
  }
};

Methods

Coming soon...

Authors and Contributors

In 2015, J Iz (@iz-j) founded GitHub.

Support or Contact

Having trouble? Visit https://github.com/iz-j/textassist.