<commit_before># dataList 1.12
dataList is a jQuery plugin to make, easier and usable the use of drop down elements by adding predictive search, events management and styles. In addition, you can combine this plugin with the Bootstrap capabilities or another frameworks.

Is multilanguage, cross browser compatibility, very customizable and, by your design, is one of fastest of internet.

Examples
========
![ScreenShot](https://github.com/islavisual/dataList/blob/master/screenshot.png)

![ScreenShot](https://github.com/islavisual/dataList/blob/master/screenshot_2.png)

![ScreenShot](https://github.com/islavisual/dataList/blob/master/screenshot_3.png)

Install
=======
Your install is very easy. Only you must insert the following source code files.
```html
<script src="js/dataList.js"></script>
<link href="css/dataList.css" rel="stylesheet">
```

How to use
==========
There are several ways to use

Basic Use
---------
```html
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <select id="select" class="form-control" placeholder="Please, enter a choice">
            <option value="a">Option A</option>
            <option value="b">Option B</option>
            <option value="c">Option C</option>
        </select>
    </div>
</div>

<script>
    $('#select').dataList();
    // To Select third item of list after initialize it
    $('#select').dataList({selected_value: 'c'});
</script>
```

Advanced Use
------------
__Set default value or selected value__

```html
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <select multiple id="languages" class="form-control" placeholder="Please, enter a choice">
            <option value="en">English</option>
            <option value="fr">French</option>
            <option value="de">German</option>
            <option value="es">Spain</option>
        </select>
    </div>
</div>

<script>
    // To set a default value
    $('#languages').dataList(default_value: 'es');
    // To select one value
    $('#languages').dataList(selected_value: 'en');
</script>
```

__DataList configuration with data ranking__
```html
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <select multiple id="colors" class="form-control" placeholder="Please, enter a choice">
            <option value="1" data-rank="2.5">Red</option>
            <option value="2" data-rank="4.0">Green</option>
            <option value="3" data-rank="5.0">Blue</option>
        </select>
    </div>
</div>

<script>
    $('#colors').dataList({ dataRanking: true, return_mask:'text' });
</script>
```

__DataList configuration of type multiple with custom parameters__
```html
<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="form-group">
            <div>
                <select id="users" class="form-control" placeholder="Search" multiple>
                    <option value="1">User 1</option>
                    <option value="2">User 2</option>
                    <option value="3">User 3C</option>
                </select>
            </div>
        </div>
    </div>
</div>

<script>
    var optionsDT = {
        emptyMessage:'Not found results',
        parameterToSend:'q',
        return_mask:'value - text',
        multiple_class: 'form-control'
    };
    $('#users').dataList(optionsDT);
</script>
```

__DataList configuration simulating a SELECT tag__
```html
<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="form-group">
            <div>
                <input type="hidden" name="username" id="username" value="" />
                <select id="usernameList" class="form-control" placeholder="Search">
                    <option value="1">Paul</option>
                    <option value="2">John</option>
                    <option value="3">Clarise</option>
                </select>
            </div>
        </div>
    </div>
</div>

<script>
    var optionsDT = {
        return_mask:'text',
        value_selected_to:'username', 
        clearOnFocus: true
    };
    $('#usernameList').dataList(optionsDT);
</script>
```

__Another configuration to value_selected_to__
NOTE: To can use this option is necessary set "return_mask" property to 'value - text'.
```javascript 
var optionsDT = { value_selected_to: 'depends_id' };
```
And an example of HTML will be:
```html
<div class="col-xs-9 col-sm-9 col-md-10 col-lg-11">
    <div class="form-group">
        <label>ID</label>
            <div>
                <input name="depends_id" id="depends_id" value="" class="form-control" placeholder="ID value" />
                <select id="tasks" class="form-control" placeholder="Search">
                    <option value="1">Brainstorming</option>
                    <option value="2">Requirement taking</option>
                    <option value="3">Develop project</option>
                    <option value="4">Evaluate features</option>
                    <option value="5">Deliver to customer</option>
                </select>
            </div>
    </div>
</div>
<script>
    var optionsDT = { value_selected_to: 'depends_id', return_mask: 'value - text' };
    $('#tasks').dataList(optionsDT);<commit_msg>New examples and features<commit_after># dataList 1.12
dataList is a jQuery plugin to make, easier and usable the use of drop down elements by adding predictive search, events management and styles. In addition, you can combine this plugin with the Bootstrap capabilities or another frameworks.

Is multilanguage, cross browser compatibility, very customizable and, by your design, is one of fastest of internet.

Examples
========
![ScreenShot](https://github.com/islavisual/dataList/blob/master/screenshot.png)

![ScreenShot](https://github.com/islavisual/dataList/blob/master/screenshot_2.png)

![ScreenShot](https://github.com/islavisual/dataList/blob/master/screenshot_3.png)

Install
=======
Your install is very easy. Only you must insert the following source code files.
```html
<script src="js/dataList.js"></script>
<link href="css/dataList.css" rel="stylesheet">
```

How to use
==========
There are several ways to use

Basic Use
---------
```html
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <select id="select" class="form-control" placeholder="Please, enter a choice">
            <option value="a">Option A</option>
            <option value="b">Option B</option>
            <option value="c">Option C</option>
        </select>
    </div>
</div>

<script>
    $('#select').dataList();
    // To Select third item of list after initialize it
    $('#select').dataList({selected_value: 'c'});
</script>
```

Advanced Use
------------
__Set default value or selected value__

```html
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <select multiple id="languages" class="form-control" placeholder="Please, enter a choice">
            <option value="en">English</option>
            <option value="fr">French</option>
            <option value="de">German</option>
            <option value="es">Spain</option>
        </select>
    </div>
</div>

<script>
    // To set a default value
    $('#languages').dataList(default_value: 'es');
    // To select one value
    $('#languages').dataList(selected_value: 'en');
</script>
```

__DataList configuration with data ranking__
```html
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <select multiple id="colors" class="form-control" placeholder="Please, enter a choice">
            <option value="1" data-rank="2.5">Red</option>
            <option value="2" data-rank="4.0">Green</option>
            <option value="3" data-rank="5.0">Blue</option>
        </select>
    </div>
</div>

<script>
    $('#colors').dataList({ dataRanking: true, return_mask:'text' });
</script>
```

__DataList configuration of type multiple with custom parameters__
```html
<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="form-group">
            <div>
                <select id="users" class="form-control" placeholder="Search" multiple>
                    <option value="1">User 1</option>
                    <option value="2">User 2</option>
                    <option value="3">User 3C</option>
                </select>
            </div>
        </div>
    </div>
</div>

<script>
    var optionsDT = {
        emptyMessage:'Not found results',
        parameterToSend:'q',
        return_mask:'value - text',
        multiple_class: 'form-control'
    };
    $('#users').dataList(optionsDT);
</script>
```

__DataList configuration simulating a SELECT tag__
```html
<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="form-group">
            <div>
                <input type="hidden" name="username" id="username" value="" />
                <select id="usernameList" class="form-control" placeholder="Search">
                    <option value="1">Paul</option>
                    <option value="2">John</option>
                    <option value="3">Clarise</option>
                </select>
            </div>
        </div>
    </div>
</div>

<script>
    var optionsDT = {
        return_mask:'text',
        value_selected_to:'username', 
        clearOnFocus: true
    };
    $('#usernameList').dataList(optionsDT);
</script>
```

__Another configuration to value_selected_to__

_NOTE: To can use this option is necessary set "return_mask" property to 'value - text'._
```javascript 
var optionsDT = { value_selected_to: 'depends_id' };
```
And an example of HTML will be:
```html
<div class="col-xs-9 col-sm-9 col-md-10 col-lg-11">
    <div class="form-group">
        <label>ID</label>
            <div>
                <input name="depends_id" id="depends_id" value="" class="form-control" placeholder="ID value" />
                <select id="tasks" class="form-control" placeholder="Search">
                    <option value="1">Brainstorming</option>
                    <option value="2">Requirement taking</option>
                    <option value="3">Develop project</option>
                    <option value="4">Evaluate features</option>
                    <option value="5">Deliver to customer</option>
                </select>
            </div>
    </div>
</div>
<script>
    var optionsDT = { value_selected_to: 'depends_id', return_mask: 'value - text' };
    $('#tasks').dataList(optionsDT);
{'fraction_non_alphanumeric': 0.16300940438871472, 'fraction_numerical': 0.011209271397359171, 'mean_word_length': 2.6441675320179994, 'pattern_counts': {'":': 0, '<': 215, '<?xml version=': 0, '>': 215, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1235626', 'n_tokens_mistral': 3213, 'n_tokens_neox': 3098, 'n_words': 802}