入力ボックスの変化を監視、インスタント検索compositionstart、compositionend

言って前：トリガー時間で押されたキーボードのキーで直接入力モニタ、で、これはいくつかの問題を引き起こす可能性がある場合は、Googleのブラウザで中国語入力を入力するようなことはできません。

解決策：使用 compositionstartとcompositionendは、このイベントは、選択したテキスト入力後に開始されます。

注意：他のブラウザの実行順序が異なるGoogle Chromeのので、Googleがあるcompositionstart =>監視入力イベント=> compositionend、他のブラウザですcompositionstart => compositionend =>入力イベントを監視し、

compositionend Googleのブラウザであるかどうかを判断するので、ブラウザ互換性の入力を行います。

ピットもあり、インスタント検索は、AJAX要求入力インタフェースは、異なる同期非同期操作を行う際に聞いている：偽、非同期、またはブラウザがクラッシュに直接立ち往生しなければならない、これはローカルのテストでは問題ではないが、ラインが登場しました！！！

        VARフラグに= falseに ; // trueには、入力された
        
        // idがこの#IDなど、その入力が入力要素である 
        （上の$（「体」）を 「compositionstart」、「.search_code .layui選択タイトルの入力」、。 関数（）{ 
            フラグに = trueに; 
        }）; 

        $（ （'compositionend' ON 'ボディ'）,. '.search_code .layui入力がタイトル選択' 機能{（）
            フラグに = falseにし; 

            //はグーグルか否かを判断しますブラウザ
            IF（！&&旗isChrome（））{ 
                ChangeEventの（この）
            } 

        }）。

        // 事件监听入力 
        $（ '体'）。（ '入力の変更'、 '.search_code .layui選択タイトルの入力'、上の関数（）{ 
            ChangeEventの（この）
        }）
     

   関数ChangeEventの（_this）{
         場合（！フラグ）{
             // 输入的值
            VARヴァル= $ .trim（$（_本）.val（））。

            $アヤックス（{ 
                URL： '接口URL' 、
                タイプ： '後' 、
                データ型： 'JSON' 、
                contentTypeの： 'アプリケーション/ JSON;のcharset = UTF-8' 、
                // 非同期：falseに、//が同期されていない
                データ：パラメータ、
                成功：機能（RES）{ 
                    はconsole.log（RES）; 
                    VARのデータ= res.data;
                     IF （RES）{
                         VAR HTML = '' ; 

                        IF（RES ！= 0 .CODE ）{ 
                            HTML + = '<オプション値= "">コードまたは</オプション>を検索する食品名を入力してください' ; 
                        } 他{
                             のために（VARの I = 0;私はdata.length <;私は++ ） { 
                                HTML= + '<オプション値= "' + DATA [I] .CODE + '">' ; 
                                HTML + =データ[I] .CODE + '' + DATA [I] .nameの+ '</オプション>' ; 
                            } 
                        } 

                        $（ '[名= food_code] SELECT' .htmlを（HTML）を）; 
                        
                        //がフォーカスを保持して、カーソルにはそうでない場合は入力しない 
                        （ 'search_code .layui-INPUT SELECT-タイトルを' $が）.focus（）; 
                        
                        / / それらの異なる書き込み変えたい、アップ再割り当て 
                        $（ '-タイトルを選択しsearch_code .layui-INPUTを。' .val（ヴァル））; 
                        
                    } 
                } 
            }）;
        } 
    } 
        
/ * *
 GOOGLE *か否かを判断する
 * / 
機能isChrome（）{
     VARのブラウザ= { 
        ：バージョン関数（）{
             varが Uはnavigator.userAgent、アプリ= = ;はnavigator.appVersionの
             リターン{ 
                u.indexOf（：トライデント 'トライデント'）> -1、// のIEコア 
                プレスト：u.indexOf（ 'プレスト'）> -1、// オペラコア 
                のWebKit：u.indexOf（ 'のAppleWebKit'）> -1、// アップル、グーグルカーネル 
                ヤモリ：u.indexOf（ 'ゲッコー'） > - && u.indexOf。1（ 'KHTML'）== -1、// Firefoxのコア
                モバイル：!! u.match（/AppleWebKit.*Mobile * /。）|| !! u.match（/のAppleWebKit /）、// 携帯端末かどうか 
                IOS：!! u.match（/ \（ I [^ ？。;] +;（U-;）CPUのMac OS X- + /）、// iOSのターミナル 
                アンドロイド：u.indexOf（ 'アンドロイド'）> -1 || u.indexOf（ 'Linuxの'）> -1、/ / AndroidのUCのブラウザ端末や 
                iPhone：u.indexOf（ 'iPhone'）> -1 || u.indexOf（ 'マック'）> -1、// かQQHDブラウザiPhone 
                アプリ：u.indexOf（ 'アプリ'）> -1、// アプリかどうか 
                Webアプリケーション：u.indexOf（'サファリ「）== -1 // Webアプリケーションがボトムヘッドないかどう
            }; 
        }（）、
        言語：（ナビゲーター。ブラウザ言語||navigator.language）.toLowerCase（）
    } 

    場合（browser.versions.webKit）{
         戻り 真。
    } 

    を返す 偽。
}

入力ボックスの変化を監視、インスタント検索compositionstart、compositionend

おすすめ