Monitor changes in input box, instant search compositionstart, compositionend

Before saying: If by direct input monitor, which is the keyboard keys pressed on the trigger time, this may cause some problems, such as want to enter the Chinese input in the Google browser can not;

Solution: Use  compositionstart and compositionend , this event will start only after the selected text input;

 

Note: Since Google Chrome different from other browsers execution order , Google is compositionstart => monitor input events => compositionend, other browsers are compositionstart => compositionend => monitor input events,

           So to judge whether there is in compositionend Google browser, do browser compatible input;

 

There is also a pit , Instant Search is listening when ajax request input interface, do different sync async: false, must be asynchronous, or stuck directly to the browser crashes, this is not a problem in the local test, the line appeared! ! !

 

        var In Flag = to false ; // to true is input 
        
        // where their input is input element, such as id #id this 
        $ ( 'body') on ( 'compositionstart', '.search_code .layui-select-title input',. function () { 
            In Flag = to true ; 
        }); 

        $ ( 'body') ON ( 'compositionend', '.search_code .layui-INPUT SELECT-title',. function () { 
            In Flag = to false ; 

            // determines whether Google browser 
            IF (! && Flag isChrome()){
                changeEvent(this)
            }

        }); 

        // 监听input事件
        $('body').on('input change', '.search_code .layui-select-title input', function(){
            changeEvent(this)
        })
     

   function changeEvent(_this){
        if(!flag){
            // 输入的值
            var val = $.trim($(_this).val());

            $.ajax({
                url: '接口url',
                type: 'post',
                dataType: 'json',
                contentType:'application/json; charset=utf-8',
                // the async: to false, // is not synchronized 
                Data: the params, 
                Success: function (RES) { 
                    the console.log (RES); 
                    var Data = res.data;
                     IF (RES) {
                         var HTML = '' ; 

                        IF (RES = 0 .code! ) { 
                            HTML + = '<Option value = ""> code or enter the food name to search </ Option>' ; 
                        } the else {
                             for ( var I = 0; I <data.length; I ++ ) { 
                                HTML= + '<Option value = "' + Data [I] .code + '">' ; 
                                HTML + = Data [I] .code + '' + Data [I] .name + '</ Option>' ; 
                            } 
                        } 

                        $ ( 'SELECT [name = food_code]' ) .html (HTML); 
                        
                        // holds the focus, the cursor no otherwise enter the 
                        $ ( 'search_code .layui-iNPUT SELECT-title.' ) .focus (); 
                        
                        / / reassigned up, do change their different writing 
                        $ ( 'search_code .layui-INPUT SELECT-title.' ) .val (Val); 
                        
                    } 
                } 
            });
        } 
    } 
        
/ **
 Determines whether Google *
 * / 
Function isChrome () {
     var Browser = { 
        versions: function () {
             var U = the navigator.userAgent, App = of navigator.appVersion;
             return { 
                Trident: u.indexOf ( 'Trident')> -1, // IEs core 
                Presto: u.indexOf ( 'Presto')> -1, // Opera core 
                WebKit: u.indexOf ( 'AppleWebKit')> -1, // Apple, Google kernel 
                gecko: u.indexOf ( 'Gecko') > - && u.indexOf. 1 ( 'KHTML') == -1, // Firefox core
                Mobile: !! u.match (/AppleWebKit.*Mobile * /.) || !! u.match (/ AppleWebKit /), // whether the mobile terminal 
                ios: !! u.match (/ \ ( i [^ ?.;] +; (the U-;) the CPU the Mac the OS X-+ /), // iOS terminal 
                Android: u.indexOf ( 'the Android')> -1 || u.indexOf ( 'the Linux')> -1, / / Android uc browser terminal or 
                iPhone: u.indexOf ( 'iPhone')> -1 || u.indexOf ( 'the Mac')> -1, // whether or QQHD browser iPhone 
                iPad: u.indexOf ( ' the iPad ')> -1, // whether the iPad 
                webApp: u.indexOf (' Safari ') == -1 // if the web application should not bottom head 
            }; 
        } (), 
        Language: (Navigator.browserLanguage || navigator.language).toLowerCase()
    }

    if(browser.versions.webKit){
        return true;
    }

    return false;
}