【PHP】タグ機能①

プロフィールなどで、スキルや資格等を登録する際のタグ機能を実装しました。
![tag3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/2f4e8c6d-4158-360b-9f1e-5c09f74f346e.gif)

# 予測変換のタグ作成
jQuery UIのautocompleteを用いて、予測変換機能を実装します。
こちらのサイトを参考にさせていただきました。

https://php-archive.net/php/jquery-ui-autocomplete/

今回はプログラミング言語を中心とした、IT用語をタグとして実装します。

```php:autocomplete.php
:
$list = array(
    'AWS',
    'Bootstrap',
    'C',
    'CakePHP',
    'C#',
    'C++',
    'COBOL',
    'CSS',
    'Docker',
    'Go',
    'Git',
    'HTTP',
    'iOS',
    'Java',
    'JavaScript',
    'JIRA',
    'Kotlin',
    'Laravel',
    'MATLAB',
    'MySQL',
    'Oracle Database',
    'Perl',
    'PHP',
    'PostgreSQL',
    'Python',
    'R',
    'React',
    'Ruby',
    'Ruby on Rails',
    'Rust',
    'SVN',
    'SSL',
    'SQLite',
    'TypeScript',
    'Vue.js'
);
:
```
配列`$list`の値を変更すると、このように予測変換の文字も変わります。
![tag4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/67da8ab1-f22b-5dbf-af77-11a0fea7d81a.gif)
予測変換で選択した文字を、入力フォーム外に出力するようにします。

```js:form.php
    <form>
        <input type="text" id="sample" />
        <div id="skill">
        </div>
    </form>
:
<script>
const input = document.querySelector('input');
input.addEventListener('change', inputChange);
:
function inputChange() {
    var fome_x_name = $(this).val();
    if (list.indexOf(fome_x_name) != -1) {
        span_element = document.createElement("span");
        newContent = document.createTextNode(fome_x_name);
        span_element.appendChild(newContent);
        parentDiv = document.getElementById("skill");
        parentDiv.appendChild(span_element, parentDiv.firstChild);
        $(this).val('');
    }
}
:
```
![tag5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/837f460d-ca57-457b-cecd-13bbf5e87498.gif)

`addEventListener`の引数に`change`と`関数名(inputChange)`を指定することで、入力フォームに変更があったときに`inputChange()`が発火します。

```php
function inputChange() {
    var fome_x_name = $(this).val();
    if (list.indexOf(fome_x_name) != -1) {
```
`fome_x_name`に入力された文字を渡して、配列`list`に格納されているIT用語と一致すれば入力フォーム外に出力するようにします。

続けて、タグの取り消しボタンを実装します。

```php:form.php
function inputChange() {
　　var fome_x_name = $(this).val();
        label_element = document.createElement("label"),  //追加
        i_element = document.createElement("i"),　//追加
        input_element = document.createElement("input");　//追加

    if (list.indexOf(fome_x_name) != -1) {
        span_element = document.createElement("span");
        newContent = document.createTextNode(fome_x_name);
        span_element.appendChild(newContent);
        parentDiv = document.getElementById("skill");
        span_element.setAttribute("class", "skill_tag");
        parentDiv.appendChild(span_element, parentDiv.firstChild);
        i_element.setAttribute("class", "far fa-times-circle tag");　//追加
        i_element.setAttribute("style", "display:inline");　//追加
        input_element.setAttribute("type", "button");　//追加
      　span_element.appendChild(label_element,span_element.firstChild);　//追加
        label_element.insertBefore(i_element, label_element.firstChild);　//追加
        label_element.insertBefore(input_element, label_element.firstChild);　//追加
        $(this).val('');
    }
}

$(document).on('click', '.far.fa-times-circle', function() {　//追加
    $(this).parents(".skill_tag").remove();　//追加
});　//追加
```
![tag6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/d63b7131-979e-05c0-3bd4-e0a9afa6707d.gif)

`createElement`で各要素を作成して、下記のように構成します。
※AWSの場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/61af80ed-5242-e7de-9ea9-a21514cc354f.png)

取り消しボタンについては、下記サイトを参考にしています。

https://fontawesome.com/

```php
$(document).on('click', '.far.fa-times-circle', function() {
    $(this).parents(".skill_tag").remove();
});
```
これで`i要素`がクリックされたときに、タグが削除されるように実装されます。

```css
.skill_tag {
    font-size: 1px;
    padding: 1px;
    border: 1px solid #b2cdde;
    border-radius: 3px;
    background-image: linear-gradient( 180deg, #cae2f0 0, #c3d9e7);
    color: #545b67;
    padding: 1px 8px 0px;
}
```
CSSでレイアウトを組みます。
![tag7.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/972785e8-bb4b-4cea-b73f-249871687430.gif)