vue2 autocompleteダウンロード - vue2 autocompleteソースコードのダウンロード

Vue 2 オートコンプリート

Vue 2 のオートコンプリートコンポーネント。vue-autocomplete に基づいています。ライブデモはこちらから！

vue Autocomplete component

インストール

このように vue2-autocomplete.vue を vue コンポーネントファイルにインポートし、プリプロセッサで処理できます。

NPM経由でインストールできます

npm install vue2-autocomplete-js

または、Vue JS の後に置くだけです~

 < script src =" https://vuejs.org/js/vue.min.js " > </ script >
< script src =" ./dist/vue2-autocomplete.js " > </ script >
< script >
  // Don't Forget to register it
  new Vue ( {
    components : {
      autocomplete : Vue2Autocomplete
    }
  } ) ;
</ script >

スタイルのインポート

vue 2 CSS をインポートすることを忘れないでください。 html経由でリンクできます

 < link rel =" stylesheet " href =" vue2-autocomplete-js/dist/style/vue2-autocomplete.css " >

または、commonJS を使用してインポートできます

 require ( 'vue2-autocomplete-js/dist/style/vue2-autocomplete.css' )

そのスタイルは非常にカスタマイズ可能です。任意の CSS をその上に置くことができます。そして、そのプロパティを介してカスタムクラスを追加できます。

インポートモジュール

 import Autocomplete from 'vue2-autocomplete-js'
// Or
var Autocomplete = require ( 'vue2-autocomplete-js' ) ;

使用法

 < template >

  < autocomplete
    url =" http://localhost/proyek/goodmovie/api/api/v1/search "
    anchor =" title "
    label =" writer "
    :on-select =" getData " >
  </ autocomplete >

</ template >


< script >

  import Autocomplete from 'vue2-autocomplete-js' ;

  export default {

    components : { Autocomplete } ,

    methods : {
      getData ( obj ) {
        console . log ( obj ) ;
      }
    }
  } ;

</ script >

利用可能な小道具

 < template >

  < autocomplete
    url =" http://localhost/proyek/goodmovie/api/api/v1/search "
    anchor =" title "
    label =" writer "
    :onSelect =" getData "
    :customParams =" { token: 'dev' } "
    :customHeaders =" { Authorization: 'bearer abc123' } "


    :required =" true "
    id =" custom id "
    className =" custom class name "
    :classes =" { wrapper: 'form-wrapper', input: 'form-control', list: 'data-list', item: 'data-list-item' } "
    placeholder =" placeholder "
    :initValue =" initial value "


    :options =" [] "
    :min =" 3 "
    :debounce =" 2000 "
    :filterByAnchor =" true "
    :encodeParams =" true "

    :onShouldGetData =" getData "
    :onInput =" callbackEvent "
    :onShow =" callbackEvent "
    :onBlur =" callbackEvent "
    :onHide =" callbackEvent "
    :onFocus =" callbackEvent "
    :onSelect =" callbackEvent "
    :onBeforeAjax =" callbackEvent "
    :onAjaxProgress =" callbackEvent "
    :onAjaxLoaded =" callbackEvent "
    :onShouldRenderChild =" renderChild "
  >
  </ autocomplete >

</ template >

小道具

URL* (文字列)

URL はアクティブである必要があります (ファイルからではありません)。コンポーネントはこの URL から JSON を取得し、1 つの params (デフォルト: q ) クエリを渡します。のように：

 http://some-url.com/API/list?q=

コンポーネント内にはフィルターや制限アクションはありません。したがって、API ロジックでそれを実行します。

パラメータ (文字列: "q")

Ajax 呼び出しでクエリする検索パラメータの名前。デフォルトはqです

分 (数値: 0)

検索クエリを実行する前の最小入力文字数。デフォルトは0です

アンカー* (文字列)

これは、候補リストのアンカーに使用されるオブジェクトプロパティパスです。例のanchor="name" JSONオブジェクトのnameプロパティを取得します。上のデモの（「バンバン」、「スキジャン」、「ベジョ」）のように。あるいは、オブジェクトの深い価値に到達することもできます。 anchor="geometry.location.lat"のように

ラベル (文字列)

アンカーと同じですが、リストのサブタイトルまたは説明に使用されます。

オプション (配列)

リストオプションの配列をオートコンプリートに手動で渡します。

filterByAnchor (ブール値: true)

オプションの小道具を使用している場合、オートコンプリートを使用してデータをフィルターできます。または、オートコンプリートのフィルターを使用せずにデータを直接表示することもできます。オプションはアンカーによってフィルターされ、ユーザーの入力に従ってフィルターされます。

encodeParams (ブール値: true)

Autocomplete は、この props がtrueに設定されている場合、Ajax 送信前にすべてのパラメーターencodeURIComponentします。デフォルトはtrue #35

デバウンス (数値)

データに対して ajax を実行するまでの遅延時間

必須 (ブール値)

入力に必須の属性

プレースホルダー (文字列)

入力用のプレースホルダー

クラス名 (文字列)

オートコンプリートコンポーネントのカスタムクラス名

クラス (オブジェクト)

各パーツの特定のカスタムクラス。利用可能: ラッパー、入力、リスト、アイテム

ID (文字列)

オートコンプリートコンポーネントのカスタムID名

デバウンス (数値)

リクエストが送信される前にユーザーが入力を停止する必要があるミリ秒数。デフォルトは 0 で、すべてのリクエストが即時に送信されることを意味します。

プロセス（関数）

APIの結果を処理する関数。エントリの配列、またはプロパティを列挙できるオブジェクトを返す必要があります。

テンプレート（機能）

各結果を処理する関数。 API 応答要素のタイプを受け取り、HTML データを返す必要があります。

コールバックイベント

小道具を介してコールバックイベントを作成できます。

onInput (関数)

オートコンプリートの入力イベント時

onShow (関数)

オートコンプリートリストにイベントを表示するとき

onBlur (関数)

オートコンプリートがぼやける場合

onHide (関数)

オートコンプリートリストが非表示の場合

onFocus (関数)

フォーカスモードでのオートコンプリート入力時

onSelect (関数)

ユーザーがリスト内の項目を 1 つ選択したとき

onBeforeAjax (関数)

ajax送信前

onAjaxProgress (関数)

ajaxがデータを取得している間

onAjaxLoaded (関数)

ajaxプロセスが完全にロードされたとき

onShouldGetData (関数)

ajax プロセス全体を手動で処理します。 Promise の場合は、オートコンプリートのリストのオプションを解決する必要があります。 Promise ではない場合は、オートコンプリートの props にオプションを手動で渡すことができます。

 < autocomplete
  anchor =" formatted_address "
  label =" formatted_address "
  :onShouldGetData =" getData "
>
</ autocomplete >

methods: {
  promise ( value ) {
    return new Promise ( ( resolve , reject ) => {
      let ajax = new XMLHttpRequest ( ) ;
      ajax . open ( 'GET' , `https://maps.googleapis.com/maps/api/geocode/json?address= ${ value } ` , true ) ;
      // On Done
      ajax . addEventListener ( 'loadend' , ( e ) => {
        const { responseText } = e . target
        let response = JSON . parse ( responseText ) ;
        // The options to pass in the autocomplete
        resolve ( response . results )
      } ) ;
      ajax . send ( ) ;
    } )
  } ,

  nonPromise ( ) {
    getData ( value ) {
      let ajax = new XMLHttpRequest ( ) ;
      ajax . open ( 'GET' , `https://maps.googleapis.com/maps/api/geocode/json?address= ${ value } ` , true ) ;
      // On Done
      ajax . addEventListener ( 'loadend' , ( e ) => {
        const { responseText } = e . target
        let response = JSON . parse ( responseText ) ;
        // The options to pass in the autocomplete props
        this . options = response . results ;
      } ) ;
      ajax . send ( ) ;
    } ,
  }
}

プロセス（関数）

結果配列を取得する前に結果を処理します。オートコンプリートに渡される前に、ここでデータを整形できます。

onShouldRenderChild (関数)

リストにカスタムテンプレートを使用したいですか?さあ、できるよ！

 < autocomplete
  anchor =" formatted_address "
  label =" formatted_address "
  :onShouldRenderChild =" renderChild "
>
</ autocomplete >

methods: {
  renderChild ( data ) {
    return `
      <img src=" ${ data . src } " />
      <span> ${ data . something } </span>
    `
  } ,
}

メソッド

JavaScript を介してコンポーネントにアクセスすることで、いくつかのメソッドを実行できます。

 this . $refs . autocomplete . someMethod ( )

setValue (文字列)

オートコンプリート入力の値を設定するには

役に立ちました、ありがとうございます~

私といくつかのプロジェクトについて話しましょう

下記までご連絡ください:

電子メール: [email protected]
Skype ID: bosnaufal254
ツイッター:@BosNaufal

ライセンス

拡大する