반응형

입력항목 기록 삭제, How to clear history of text input

https://www.w3schools.com/tags/att_input_autocomplete.asp

 

HTML input autocomplete Attribute

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

<input type="email" name="email" autocomplete="off">


<form action="/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit">
</form>

속성 autocomplete은 입력 필드에서 자동 완성을 활성화해야 하는지 여부를 지정합니다.

 

자동 완성을 사용하면 브라우저가 값을 예측할 수 있습니다. 사용자가 필드에 입력하기 시작하면 브라우저는 이전에 입력한 값을 기반으로 필드를 채울 수 있는 옵션을 표시해야 합니다.

 

참고: 속성 autocomplete은 텍스트, 검색, URL, 전화번호, 이메일, 비밀번호, 날짜 선택기, 범위 및 색상 입력 유형과 함께 작동합니다.

반응형
반응형

jQuery 자동완성 기능 - jQuery-UI


http://jqueryui.com/autocomplete/#default


한글이 안된다면 charset을 euc-kr로 변경해보기 바란다. 



반응형
반응형

jQuery.textcomplete: Autocomplete for textarea

자동완성

 

Forms - jQuery/Added on September 11, 2013/Add to favorites

jQuery.textcomplete is a jQuery plugin that adds an autocomplete feature to textareas, like the ones found in GitHub comment forms. It’s completely open source, released under the MIT license.

jquery textcomplete

Homepage: http://yuku-t.com/jquery-textcomplete/
GitHub: https://github.com/yuku-t/jquery-textcomplete

 

 

Autocomplete for Textarea

Introduces autocompleting power to textareas, like a GitHub comment form has.

DemoDemo.

How to use

Note: The key words "MUST", "SHOULD", and "MAY" in this document are to be interpreted as described in RFC 2119.


jQuery MUST be loaded ahead.

<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.textcomplete.js"></script>

Then jQuery.fn.textcomplete is defined. The method MUST be called for textarea elements, and the receiver SHOULD include an element.

$('textarea').textcomplete(strategies);

The strategies is an Object not an Array. Each value is called a strategy object and the corresponding key is the name of the strategy.

var strategies = {
  // There are two strategies called 'foo' and 'bar.'
  // The plugin does not care these property names so you should use
  // meaningful names.
  foo: strategy,
  bar: otherStrategy
};

The strategy is an Object which MUST have match, search and replace and MAY have index, maxCount and template.

var strategy = {
  // Required
  match:    matchRegExp,
  search:   searchFunc,
  replace:  replaceFunc,

  // Optional
  index:    indexNumber,
  maxCount: maxCountNumber,
  template: templateFunc,
  cache:    cacheBoolean
}

The matchRegExp and indexNumber MUST be a RegExp and a Number respectively. matchRegExp MUST contain capturing groups and SHOULD end with $. indexNumber defaults to 2. The word captured by indexNumber-th group is going to be the term argument of searchFunc.

// Detect the word starting with '@' as a query term.
var matchRegExp = /(^|\s)@(\w*)$/;
var indexNumber = 2;

The searchFunc MUST be a Function which gets two arguments, term and callback. It MUST invoke callback with an Array of String. It is guaranteed that the function will be invoked exclusively even though it contains async call.

If you want to execute callback multiple times per a search, you SHOULD give true to the second argument while additional execution remains. This is useful to use data located at both local and remote. Note that you MUST invoke callback without truthy second argument at least once per a search.

The maxCountNumber MUST be a Number and default to 10. Even if searchFunc callbacks with large array, the array will be truncated into maxCountNumber elements.

The cacheBoolean MUST be a Boolean. It defaults to false. If it is true the searchFunc will be memoized by term argument. This is useful to prevent excessive API access.

var searchFunc = function (term, callback) {
  // Show local cache immediately.
  callback(cache[term], true);

  $.getJSON('/search', { q: term })
    .done(function (resp) {
      // Resp must be an Array of String such as:
      //   ['hello', 'world']
      callback(resp);
    })
    .fail(function () {
      // Callback must be invoked even if something went wrong.
      callback([]);
    });
};

The templateFunc MUST be a Function which gets and returns a string. The function is going to be called as an iteretor for the array given to the callback of searchFunc.

var templateFunc = function (value) {
  return '<b>' + value + '</b>';
};

The replaceFunc MUST be a Function which gets and returns a string. It is going to be invoked when a user will click and select an item of autocomplete dropdown.

var replaceFunc = function (value) { return '$1@' + value + ' '; };

The result is going to be used to replace the textarea's text content using String.prototype.replace with matchRegExp:

textarea.value = textarea.value.replace(matchRegExp, replaceFunc(value));

Example

var emojies = ['+1', '-1', 'dog', 'cat'];

$('textarea').textcomplete({
  // mention strategy
  mention: {
    match: /(^|\s)@(\w*)$/,
    search: function (term, callback) {
      callback(cache[term], true);
      $.getJSON('/search', { q: term })
        .done(function (resp) { callback(resp); })
        .fail(function ()     { callback([]);   });
    },
    replace: function (value) {
      return '$1@' + value + ' ';
    },
    cache: true
  },

  // emoji strategy
  emoji: {
    match: /(^|\s):(\w*)$/,
    search: function (term, callback) {
      var regexp = new RegExp('^' + term);
      callback($.map(emojies, function (emoji) {
        return regexp.test(emoji) ? emoji : nil;
      }));
    },
    replace: function (value) {
      return '$1:' + value + ': ';
    }
  }
});

Style

The HTML generated by jquery-textcomplete is compatible with Bootstrap's dropdown. So all Bootstrap oriented css files are available.

This repository also includes jquery.autocomplete.css. It is useful to be used as the starting point. 

 

반응형

+ Recent posts