通過按下按鈕使數據顯示在文本輸入上

Question

我有這樣的表格：

和這樣的數據庫：

id   tagname  
1    horor      
2    race  

到目前為止，我有這樣的代碼：

  <div class="form-group">
        <label>Tags:</label>
        <input data-role="tagsinput" type="text" name="tags" id="myBtn" class="form-control">
        @if ($errors->has('tags'))
  <span class="text-danger">{{ $errors->first('tags') }}</span>
        @endif
  </div>
  <div class="form-group">
  @foreach ($tags as $item)
  <button type="button" onclick="myFunction()" class="btn btn-secondary btn-sm">{{$item- 
  >tagname}}</button>
  @endforeach
  </div>

<script>
function myFunction() {
document.getElementById("myBtn").value = "{{$item->id}}";
}
</script>

我的控制器代碼

public function create()
{
    $tags = tag::select('id','tagname')->get();

    return view('artikel.create', compact('tags'));
}

我想要存檔的是，如果我選擇標簽輸入下方的按鈕，那么它會出現在標簽輸入文本欄上，當然它不僅會添加 1 個值，而且可以選擇多個按鈕並使其出現在該文本輸入上並自動分隔,例如這個：

.thnx 提前。

Answer 1

不使用 framwrok，使用 html javascript 來顯示它的工作。

html :

<input type="text" name="tags" id="myBtn" class="form-control">

  <button type="button" onclick="myFunction(this)" class="btn btn-secondary btn-sm" value='horor'>horor</button>
  <button type="button" onclick="myFunction2(this)" class="btn btn-secondary btn-sm" value='race'>race</button>

<script>
function myFunction(me) {
    txt = document.getElementById("myBtn").value;

    if( txt == '' ) {
        document.getElementById("myBtn").value = me.value;
    } else {
        document.getElementById("myBtn").value += ',' + me.value;
    }
}

function myFunction2(me) {
    txt = document.getElementById("myBtn").value;

    // skip duplicate
    if( txt.search( me.value ) >= 0 ) {
        return;
    }
    
    if( txt == '' ) {
        document.getElementById("myBtn").value = me.value;
    } else {
        document.getElementById("myBtn").value += ',' + me.value;
    }
}
</script>