Как добавить поиск / предварительный просмотр в поле ввода моего тега? - PullRequest
1 голос
/ 06 ноября 2019

У меня есть поле ввода, которое может сохранять любые теги для меня в базе данных. Это работает только с тем, что я пишу в этой области. Но я хочу сделать предварительный просмотр существующих тегов на этом входе, например, раздела тегов из stackoverflow. Итак, если я напишу t, я хочу получить предварительный просмотр существующих тегов с первой буквой t, как я могу это сделать? На данный момент я создал функцию select-option со значениями от tag, но если мне не нужен какой-либо тег из этого списка, я не могу записать другие значения вместо предварительного просмотра.

Вот мой взгляд:

<div class="g-mb-30">
    <label class="g-mb-10">Tag</label>

    <div class="u-tagsinput--v2--blue g-brd-around g-brd-gray-light-v7 g-brd-gray-light-v3--focus g-rounded-4 g-px-6 g-py-5">
        <input type="text" data-role="tagsinput" name="tag" placeholder="Insert Tag" >
    </div>
</div>

Вот мой контроллер с переменной, которая дает мне теги:

public function create()
{
    $data['breadcrumbs'] = "News";
    $data['page_header'] = "News";
    $data['title'] = "News";
    $data['menu'] = "News";

    $news = News::select('tag')->distinct()->get();

    return view('news.add_news',$data)
        ->with(compact('news'));
}

Вот мой выборопция без ввода на

<div class="col-md-12">
    <label class="g-mb-10">Tags</label>
    <select id="choices-multiple-remove-button" placeholder="Select" multiple title="Category Talent" name="talent_id[]">
        @foreach($news as $tag)
            <option value="{{ $talents->id }}">{{ $tag->tag }}</option>
        @endforeach
    </select> 
</div>

1 Ответ

0 голосов
/ 06 ноября 2019

Итак, вы ищете плагин автозаполнения. У вас есть два варианта:

  1. Создать плагин самостоятельно с нуля
  2. Использовать любой уже созданный плагин

Я рекомендую вам использовать уже созданный тегвходные плагины, которые поддерживают автозаполнение. Вы можете попробовать работать с TextExt (https://textextjs.com/), основанным на JQuery.

Также доступно много других опций.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...