Multiple values jui autocomplete

Yii 2.0 General Discussions
1

Hi,

With Yii2 you can use ‘\yii\jui\AutoComplete’. I got this working, but…

I want the ability to choose more values.

According to ‘jqueryui.com/autocomplete/#multiple’ it is possible. When I use this script using an asset it does work, but I don’t want hard coded values. I want values from a tags table.

the script I use in a form is


<?= $form->field($model, 'tags')->widget(\yii\jui\AutoComplete::classname(), [

    'clientOptions' => [

        'source' => \backend\models\BlogTag::suggestTags(),

    ],

    'options' => ['maxlength' => '128', 'style' => 'width:100%']

]) ?>

But after you select a value from the list, you cannot add another one using the autocomplete list…that does not show up…

Does anybody have experience to use the \yii\jui\AutoComplete with multiple values?

(Sorry for my bad english)

2

Here is an example: jqueryui.com/resources/demos/autocomplete/multiple.html

But better choise is yii2-selectize-widget

3

Hi, thanks for your answer. I will try out this widget of 2amigos. ;)

4

Sorry. This is not what I’m looking for.

With this widget you can not add new tags via the text input.

the jui autocomplete is good, but need to find out how I can use this widget to select multiple values…

5

MvE-IT-Solutions, yii2-selectize-widget can more than jqueryuiautocomplete

With this widget you can add new tags via the text input.

6

Ok, but yii2-selectize-widget puts all tags in the field, I want a widget that autocompletes the input in the text input and the ability to input more then one tag.

7

he has this all features

8

Let me explain… I have a tags field in my blog table (varchar).

I have a tags table (the blog schema from yii 1.1)

When I use this widget, I can select every tag from the table… but cannot add a tag which does not exist in tags table.

I’ll keep looking for a solution using autocomplete widget of jui… there must be a way to arrange this ;)

9

First primer in documentation

namely:




    create: function(input) {

        return {

            value: input,

            text: input

        }

    }

Just put this create to clientOptions. jui - it`s rudiment ;)

10

I think the problem is \yii\jui\AutoComplete widget. When I use clientOptions to setup the config (using new JsExpression)…the config is visible in the browser source view and looks like it should be, but does not work.

No matter how I do it. On the other forums I found more people with the same issues… so I will use my below solution for the time being.

When is use below script in my _form view file, I AM able to select multiple tags…


<?php $this->registerJs("

$(document).ready(function(){

	function split( val ) {

		return val.split( /,\s*/ );

	}

	function extractLast( term ) {

		return split( term ).pop();

	}

    $('#blogpost-tags' )

      // don't navigate away from the field on tab when selecting an item

      .bind( 'keydown', function( event ) {

        if ( event.keyCode === $.ui.keyCode.TAB &&

            $( this ).autocomplete( 'instance' ).menu.active ) {

          event.preventDefault();

        }

      })

      .autocomplete({

        minLength: 0,

        source: function( request, response ) {

          $.getJSON( '".Url::to('suggest')."', {

            term: extractLast( request.term )

          }, response );

        },

        focus: function() {

          // prevent value inserted on focus

          return false;

        },

        select: function( event, ui ) {

          var terms = split( this.value );

          // remove the current input

          terms.pop();

          // add the selected item

          terms.push( ui.item.value );

          // add placeholder to get the comma-and-space at the end

          terms.push( '' );

          this.value = terms.join( ', ' );

          return false;

        }

      });

});");?>