Sample Code (yii-select2), yii2yii-select2 with search functionality in the drop-down box of the yii2 component

Sample Code (yii-select2), yii2yii-select2 with search functionality in the drop-down box of the yii2 component

Simple and small functions, but it is quite easy to use. Share it to let more people have a faster development efficiency, happy and happy programming.

If you have not used composer, you can get out of it. In my tutorials, composer is absolutely magical. Let's talk about this point. Let's use composer for installation.

Don't worry. Let's first look at what it looks like, or you're not in the mood to see it.

What are you not interested in? Continue to read it. After reading the operation, you can find out where it is.

You may feel very handsome. Of course, there are far more than what you can do. It is also very helpful to you.

Okay, so hurry up and install it. Otherwise, the conversation will be endless.

composer require kartik-v/yii2-widget-select2 "@dev"

Note: The dev version installed here, that is, the development version, is not stable. If your project is hosted by git, after the composer is installed, remember to delete the \ vendor \ kartik-v \ yii2-widget-select2 directory. git file, or you cannot submit it.
It will take about five minutes for him to complete the installation. Then we can start using it like below.

// If your form is ActiveForm, use kartik \ select2 \ Select2; // $ data is a key-value Pair array, key-value, all the $ data declared below is an array of key-value pairs. Take this array as an example $ data = [2 => 'dropdownlist', 3 => 'dropdownlist ', 4 => 'ii2']; echo $ form-> field ($ model, 'title')-> widget (Select2: classname (), ['data' => $ data, 'options' => ['holder' => 'select... '],]);

// If your form is not ActiveForm, refer to the following use kartik \ select2 \ Select2; echo Select2: widget (['name' => 'title ', 'data' => $ data, 'options' => ['holder' => 'select... ']);

When updating data generated by non-ActiveFomr, You need to select it by default. You can add the value.

Use kartik \ select2 \ Select2; echo Select2: widget (['name' => 'title', 'value' => 2, 'data' => $ data, 'options' => ['holder' => 'select... ']);

But what if your form is generated by ActiveForm but the field is often not a table field? For example, you only need to specify $ model-> title = ['title1', 'title2 '];

This is basically the case, so we can easily implement the drop-down selection and searchable function. However, why did we come up with another one? But we just thought about it. The truth is, the little editor said, can you perform this operation more conveniently, it is too troublesome to choose one at a time. Can you choose more? In order to implement your ZB tricks, well, it is indeed simple, and a line of code is eliminated.

Echo $ form-> field ($ model, 'title')-> widget (Select2: classname (), ['data' => $ data, 'options' => ['Multiple '=> true, 'placeholder' =>' select... '],]); # the same as the default value for multiple options.

Note that the multiple option is added. The operations on forms generated by non-ActiveForm are the same.

Let's see how it works.

At this point, we can happily go home with the song of NB.

Wait, it seems that you have forgotten something. Some eye-catching friends may have noticed that $ data is the data we have prepared in advance. You said that if the data volume is large, it will not be dead, next let's take a look at how to Implement Asynchronous search results. For example, we want to query a title, but the data size of our book is about 100, which is very simple. We need to obtain the data in the drop-down box asynchronously based on your search results. It is not complete and will be explained later.

Come on, guys. Let's take a look at how to use the asynchronous search function. It is more useful and convenient at work, especially when associating data.

The basic usage method is not much said. Please refer to the above steps. We will continue to make a big joke here.

Let's preview the asynchronous search

Note: The Marked part in the figure is searched by the input keyword. What about the asynchronous effect? I guess you won't see the effect either, I don't know how to do it. Do you want to say what the effect is? I believe most people also understand it. This is called "only meeting" and "not talking. Now, let's look at the specific operations directly with the code.

// View layer use kartik \ select2 \ Select2; use yii \ web \ JsExpression; <? Php echo $ form-> field ($ model, 'title')-> widget (Select2: classname (), ['options' => ['holder' => 'enter the title name... '], 'ininoptions' => ['holder' => 'search... ', 'allowclear' => true, 'language' => ['errorloading' => new JsExpression ("function () {return 'waiting... ';} "),], 'ajax' => ['url' => 'here is the data source interface ', 'ype ype' => 'json ', 'data' => new JsExpression ('function (params) {return {q : Params. term };}')], 'fig => new JsExpression ('function (markup) {return markup ;}'), 'templateresresult' => new JsExpression ('function (res) {return res. text;} '), 'templateselection' => new JsExpression ('function (res) {return res. text;} '),],]);?>

The above code can be directly copied and used, but only the url address in ajax needs to be modified. Next, let's take a look at how the controller-Layer Code provides data.

// Controller layer public function actionSearchTitle ($ q) {\ Yii: $ app-> response-> format = \ yii \ web \ Response: FORMAT_JSON; $ out = ['results' => ['id' => '', 'text' =>'']; if (! $ Q) {return $ out;} $ data = Article: find ()-> select ('Id, title as text')-> andFilterWhere (['like ', 'title', $ q])-> limit (50)-> asArray ()-> all (); $ out ['results'] = array_values ($ data ); return $ out ;}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.