Solve iview of select either edit and can select (modify select on the basis of iview)

In order to complete either select edit, and can be modified. Another earlier automatically complete the auto-complete assembly of this feature iview.

Interested can go to see my last essay https://www.cnblogs.com/mayiaction/p/12030504.html .

It took a lot of effort, use the select function also realized this. code show as below:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>iview example</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
</head>
<body>
    <div id="app">
        
        <i-select style="width: 200px" ref="test" v-model="model11" filterable allow-create  @on-query-change="isQueryChange">
            <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
        </i-select>
            
    </div>
<script>

    window.vm = new Vue({
        el: '#app',
        data: {
            cityList: [
                    {
                        value:'n',
                        label:'NewYork'
                    },
                    {
                        value:'l',
                        label:'London'
                    },
                    {
                        value:'s',
                        label:'Sydney'
                    },
                    {
                        value:'o',
                        label:'Ottawa'
                    },
                    {
                        value:'p' , 
                        Label: ' Paris ' 
                    }, 
                    { 
                        value: ' C ' , 
                        label: ' Canberra ' 
                    } 
                ], 
            model11: '' ,     // bind values, for storing the value iview component binding, but this practice I , at the time of submission, instead of using the change value, which is more complete page to effect 
            model12: ''      // actual value, when the actual submission of the need to pass the actual value to the background 
        }, 
        Methods: { 
            // each input when the contents of the box to change the method of triggering 
            isQueryChange:function (value) { 
                the let that =  the this ; 

                the let refObj =  the this . $ refs.test;
                 // adjust iview style, filterQueryChange for filtering off iview, additional layers need to hide the pop off the allow-create iview added 
                Vue .nextTick ( function () { 
                    refObj.filterQueryChange = to false ; 
                    . $ ($ refObj EL) .find ( " .ivu-SELECT-Item-Enter " .) .parent () hide (); // hides the popup allowCreate 
                } ) 

                the let List =  the this .cityList; 
                the let ISEXIST =  false ;
                 // Get The value entered into the list, if the input value and the list of matches the label, then assign the value to match the value and actual value bindings 
                for (the let I = 0 ; I < List.length; I ++ ) {
                     IF (List [I] .label == value) { 
                        that.model11 = List [I] .Value; 
                        the setTimeout ( function () {
                             // to address the bug iview will select the shadow effect transferred to the selected value (value after iview select a font turns blue, the background will turn dark gray, but do not understand why the two should separate data binding, this bug will result if non manually click on the page (such as page after initialization), the value of the selected background is white, but gray is manually click)
                            refObj.focusIndex = I; 
                        }, 0  )
                        that.model12 = list [I] .Value; 
                        ISEXIST =  to true ; 
                    } 
                } 
                IF ( ! ISEXIST) {
                     // If the value is not entered in the front list, the case should not select any value, the value of the first selection box is empty to bind 
                    the this .model11 =  "" ;
                     // At this point the value of the background is required to submit custom input values assigned to the actual value 
                    that.model12 = value;
                     // here to solve small bug iview, clear shading off effect after selected 
                    refObj.focusIndex =  - . 1 ; 
                }
                 
            } 
        } 
    }) 
  </ Script > 
</ body > 
</ HTML >

This practice biggest drawback is the value of v-model is bound to raise prices is not our ultimate value to the background, but because of the value of v-model is bundled with pages bound, want to complete editable features, will a variety of problems.

Notes written in code is very clear, and if you still have any questions, please leave a message.

Solve iview of select either edit and can select (modify select on the basis of iview)

Guess you like