تحميل typeahead standalone - تنزيل كود مصدر typeahead standalone

Typeahead-standalone.js

حالة البناء

مكتبة الإكمال التلقائي المستقلة السريعة كاملة المواصفات

؟ يسلط الضوء؟

اقتراحات سريعة للغاية والإكمال التلقائي
؟ لديه 0 التبعيات ! مكتوب بلغة JS خالصة (نسخة مطبوعة)
؟ إطار ملحد! يمكن استخدامه مع أي إطار عمل (React، Vue، Svelte، إلخ)
قابلة للتخصيص للغاية وخفيفة الوزن
⚜️ دعم مدمج لمصادر بيانات متعددة - محلية، وجلب مسبق، وعن بعد (معدل الطلبات محدود افتراضيًا)
⚡️ يتم احتساب الاقتراحات عبر خوارزمية فعالة للغاية تعتمد على بنية البيانات التجريبية
♿️ نمط تصميم متوافق مع WAI-ARIA مع دعم لعلامات التشكيل اللغوية
يدعم كل متصفح رئيسي!

العرض التوضيحي/المستندات

يمكنك العثور هنا على المستندات التفصيلية التي تحتوي على العروض التوضيحية المباشرة لـ typeahead-standalone.js .

معاينة المثال الأساسي:

مثال أساسي

➕ تثبيت

 # you can install typeahead with npm
$ npm install --save typeahead-standalone

# Alternatively you can use Yarn
$ yarn add typeahead-standalone

ثم قم بتضمين المكتبة في التطبيق/الصفحة الخاصة بك.

كوحدة نمطية،

 // using ES6 modules
import typeahead from 'typeahead-standalone' ; // imports library (js)
import 'typeahead-standalone/dist/basic.css' ; // imports basic styles (css)

// using CommonJS modules
const typeahead = require ( 'typeahead-standalone' ) ;
require ( 'typeahead-standalone/dist/basic.css' ) ;

في سياق المتصفح،

 <!-- Include the basic styles & the library -->
< link rel =" stylesheet " href =" ./node_modules/typeahead-standalone/dist/basic.css " />
< script src =" ./node_modules/typeahead-standalone/dist/typeahead-standalone.umd.js " > </ script >

<!-- Alternatively, you can use a CDN. For example, use jsdelivr to get the latest version -->
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/typeahead-standalone/dist/basic.css " />
< script src =" https://cdn.jsdelivr.net/npm/typeahead-standalone " > </ script >

<!-- or use unpkg.com to get a specific version -->
< link rel =" stylesheet " href =" https://unpkg.com/[email protected]/dist/basic.css " />
< script src =" https://unpkg.com/[email protected]/dist/typeahead-standalone.umd.js " > </ script >

ستكون المكتبة متاحة ككائن عالمي على window.typeahead

؟ الاستخدام

يتطلب Typeahead عنصر input لإرفاق نفسه به، Data source (محلي/بعيد) لعرض الاقتراحات.

فيما يلي مثال أساسي للغاية (انظر العرض التوضيحي للحصول على أمثلة متقدمة)

أتش تي أم أل

 <!-- include the library -->
< script src =" ... " async > </ script >

<!-- Html markup -->
< input type =" search " id =" searchInput " autocomplete =" off " placeholder =" Search... " >

جافا سكريبت

 // local Data
const colors = [ 'Grey' , 'Brown' , 'Black' , 'Blue' ] ;

// input element to attach to
const inputElement = document . getElementById ( "searchInput" ) ;

typeahead ( {
    input : inputElement ,
    source : {
      local : colors ,
      // prefetch: {...}
      // remote: {...}
    }
} ) ;

؟ إعدادات

يمكنك تمرير خيارات التكوين التالية إلى typeahead-standalone :

المعلمة	وصف	تقصير
`input`	يجب تمرير عنصر إدخال DOM باستخدام هذه المعلمة وستقوم الكتابة المسبقة بإرفاق نفسها بهذا الحقل.	`-` (مطلوب)
`source`	هذا هو مصدر البيانات الذي سيتم حساب الاقتراحات منه. يمكن أن يكون المصدر محليًا أو مُجلبًا مسبقًا أو مُسترجعًا من نقطة نهاية بعيدة. تفاصيل	`-` (مطلوب)
`minLength`	حدد الحد الأدنى للطول الذي يجب أن تظهر فيه الاقتراحات على الشاشة.	`1`
`limit`	تحديد الحد الأقصى لعدد الاقتراحات التي يجب عرضها.	`5`
`highlight`	يتم تمييز الحروف المطابقة من الاستعلام في قائمة الاقتراحات. تمت إضافة `tt-highlight` لتسهيل التصميم	`true`
`autoSelect`	إذا تم التعيين على "صحيح"، فسيتم تحديد أول اقتراح معروض مسبقًا	`false`
`hint`	يقوم بتحديث العنصر النائب للإدخال ليكون مساوياً للاقتراح المطابق الأول. تمت إضافة `tt-hint` لتسهيل التصميم	`true`
`diacritics`	وضع علامة لتمكين/تعطيل البحث المدعوم لعلامات التشكيل اللغوية (على سبيل المثال، البحث عن طريق تحويل الأحرف المحركة إلى نظيراتها غير المحركة)	`undefined`
`classNames: Object`	يمكن استخدام كائن classNames لتعيين فئات مخصصة لكل عنصر html يتم إدخاله في DOM. تفاصيل	`undefined`
`templates`	كائن يحتوي على قوالب للرأس والتذييل والاقتراح والمجموعة وحالة notFound. راجع قسم النماذج للتوضيح	`undefined`
`preventSubmit`	إذا تم استخدام عنصر الإدخال الخاص بك داخل عنصر نموذج، فإن هذه العلامة تسمح بمنع إجراء الإرسال الافتراضي عند الضغط على المفتاح ENTER.	`false`
`onSubmit(event, selectedItem?)`	عندما تريد استخدام الكتابة المسبقة خارج عنصر النموذج، يمكن استخدام هذا المعالج لمعالجة/إرسال قيمة الإدخال. يتم تشغيله عند الضغط على مفتاح ENTER. المعلمة الأولى هي حدث لوحة المفاتيح والمعلمة الثانية هي العنصر المحدد أو غير محدد إذا لم يتم تحديد أي عنصر	`undefined`
`display(selectedItem, event?) => string`	يتم تنفيذ رد الاتصال هذا عندما يقوم المستخدم بتحديد عنصر من الاقتراحات. يتم تمرير الاقتراح/العنصر الحالي كمعلمة ويجب أن يُرجع سلسلة تم تعيينها كقيمة الإدخال. `event` المعلمة الاختياري الثاني هو حدث الماوس/لوحة المفاتيح والذي يمكن استخدامه لتتبع تفاعل المستخدم أو للتحليلات. يتم تعيينه افتراضيًا على `null` .	إرجاع تمثيل السلسلة للعنصر المحدد
`tokenizer?: (words: string) => string[]`	يتم استخدام وظيفة الرمز المميز لتقسيم استعلام البحث وبيانات البحث حسب حرف (أحرف) معين. تكون هذه الوظيفة مفيدة عندما ترغب في البحث عن كلمات موصولة أو كلمات ذات بادئة/لاحقة معينة	يتم تقسيم الكلمات بأحرف مسافات (سطر جديد، علامة تبويب، مسافات)
`listScrollOptions?: ScrollIntoViewOptions`	يسمح بالتحكم الدقيق في سلوك التمرير لقائمة كبيرة من الاقتراحات التي تحتاج إلى التمرير. يتم تمرير هذه الخيارات إلى الدالة `scrollIntoView()` . المرجع MDN	`{ block: "nearest", inline: "nearest", behaviour: "auto"}`
`retainFocus`	هذه المعلمة مفيدة للتحكم في التركيز بالضغط على مفتاح "Tab" عندما تكون قائمة الاقتراحات مفتوحة. إذا تم تمكينه، فإنه يحدد الخيار المميز ثم يعيد التركيز إلى إدخال البحث. في حالة التعطيل، سيؤدي الضغط على "Tab" إلى تحديد الخيار المميز ونقل التركيز بعيدًا إلى العنصر التالي القابل للتركيز في النموذج الخاص بك	`true`
`hooks`	يعد خيار تكوين الخطافات مفيدًا لتنفيذ تعليمات برمجية عشوائية في لحظات محددة من دورة حياة الكتابة المسبقة. تفاصيل	غير محدد

؟ مصدر

وهذا هو مصدر البيانات الذي سيتم تقديم الاقتراحات منه. هذا هو التنسيق المتوقع للكائن المصدر.

 source: {
  local: [],
  remote: {
    url: 'https://remoteapi.com/%QUERY', // OR "url: (inputQuery: string) => `https://remoteapi.com/${inputQuery}`"
    wildcard: '%QUERY',
    debounce: 300             // optional, default => 200ms
    requestOptions: {}        // optional, default => undefined
  },
  prefetch: {
    url: 'https://remoteapi.com/load-suggestions', // OR `url: () => string`
    when: 'onFocus',          // optional, default => 'onInit'
    done: false,              // optional, default => false
    process: (items) => void, // optional, default => undefined
    requestOptions: {}        // optional, default => undefined
  },
  keys: ['...'],        // optional  (required when source => Object[])
  groupKey: '...',     // optional, default => undefined
  identity: (item) => string, // optional (determines uniqueness of each suggestion)
  transform: function (data) {
    // modify source data if needed & return it
    return data;
  }
}

محلي : يتم استخدام مصدر البيانات local عندما تريد تقديم اقتراحات من مصدر محلي مثل المتغير.
الجلب المسبق : يتم استخدام مصدر بيانات prefetch عندما تريد تحميل الاقتراحات مسبقًا من نقطة نهاية بعيدة مسبقًا. يجب عليك توفير معلمة url التي تشير إلى نقطة النهاية التي ستعرض الاقتراحات. يمكنك توفير when اختيارية تحدد متى يجب أن يحدث طلب الجلب المسبق. يتم تعيينه افتراضيًا على onInit مما يعني أنه سيتم تحميل الاقتراحات مسبقًا بمجرد تهيئة الكتابة المسبقة. يمكنك ضبطه على onFocus والذي سيؤدي إلى تحميل الاقتراحات مسبقًا فقط عندما يركز المستخدم على مربع إدخال البحث. تعتبر علامة done اختيارية ويمكن استخدامها لتعطيل طلب الجلب المسبق برمجيًا. قيمته الافتراضية false . يتم ضبطه على true تلقائيًا عندما يتم جلب البيانات مسبقًا لأول مرة (لمنع طلبات الشبكة المتعددة). من خلال done: true ، لن يحدث طلب الجلب المسبق. مثال على حالة الاستخدام للقيام بذلك هو عندما تستخدم localStorage لتخزين الاقتراحات ولكن LocalStorage كان لديه بالفعل اقتراحات مخزنة مسبقًا وبالتالي يلغي الحاجة إلى الجلب المسبق للبيانات مرة أخرى. رد الاتصال process(suggestions) اختياري. يتم تنفيذه بعد حدوث طلب الجلب المسبق. يتلقى الاقتراحات المحولة كمعلمة وكمثال يمكن استخدامه لتخزين الاقتراحات المستلمة في localStorage لاستخدامها لاحقًا.
عن بعد : يتم استخدام مصدر البيانات remote عندما تريد استجواب نقطة نهاية بعيدة لجلب البيانات.
حرف البدل : أثناء استخدام مصدر البيانات remote ، يجب عليك تعيين url وخيارات wildcard . سيتم استبدال wildcard بسلسلة البحث أثناء تنفيذ الطلب.
Debounce : يتم استخدام خيار debounce لتأخير تنفيذ طلبات http (بالملي ثانية). إنه اختياري ويكون افتراضيًا 200 مللي ثانية.
RequestOptions : يتم استخدام واجهة برمجة تطبيقات الجلب للاستعلام عن نقاط النهاية البعيدة. يمكنك توفير كائن requestOptions لتخصيص الطلب الصادر. بشكل افتراضي، نوع الاستعلام هو GET .
تحويل : يمكنك توفير وظيفة transform() اختيارية يتم استدعاؤها فورًا بعد أن تقوم نقطة النهاية للجلب المسبق/البعيدة بإرجاع استجابة. يمكنك تعديل الاستجابة قبل أن تتم معالجتها عن طريق الكتابة المسبقة.
المفاتيح : مصفوفة keys مطلوبة عندما يكون مصدر البيانات عبارة عن مصفوفة من الكائنات. يتم استخدام المفتاح الأول لتحديد خاصية الكائن التي يجب استخدامها كنص لعرض الاقتراحات. على سبيل المثال، لنفترض أن مصدر البيانات يشبه هذا:

 /* Example Data source */
[
  { id : 1 , color : "Yellow" , meta : { colorCode : "YW" } } ,
  { id : 2 , color : "Green" , meta : { colorCode : "GN" } , shade : "Greenish" } ,
  { id : 3 , color : "Olive" , meta : { colorCode : "OV" } , shade : "Greenish" } ,
  ...
]

الآن إذا أردنا استخدام النص المحدد في خاصية color ليظهر كاقتراحات، فيجب أن تتضمن المفاتيح اللون كمفتاح أول. (أي keys: ["color"] ).

إذا كنت ترغب في إضافة المزيد من الخصائص إلى فهرس البحث، فيمكنك تحديد تلك الخصائص أيضًا في مصفوفة keys . يمكن فهم ذلك بشكل أفضل باستخدام مثال. لنأخذ نفس مصدر البيانات المثال كما هو موضح أعلاه. ماذا لو أردت البحث عن الألوان بواسطة خاصية أخرى ( colorCode ) وليس فقط من خلال لونها ؟ للقيام بذلك، ما عليك سوى ضبط keys: ["color", "meta.colorCode"] . إذا كنت تبحث الآن عن " YW "، فسيظهر لك الاقتراح "أصفر" كما هو متوقع.

مفتاح المجموعة : إذا كنت ترغب في تجميع اقتراحاتك، فاضبط خيار تكوين مفتاح المجموعة. مرة أخرى، باستخدام نفس مصدر البيانات النموذجي المذكور أعلاه، عند تعيين groupKey: "shade" ، سيتم تجميع الاقتراحات حسب الخاصية " shade ". في هذا المثال، سيظهر اللونان الأخضر والزيتوني ضمن المجموعة " Greenish " ( shade ) بينما لن يكون للون الأصفر أي مجموعة. يدعم GroupKey أيضًا الوصول إلى الخصائص المتداخلة باستخدام التدوين النقطي. (مثال - groupKey: "category.title" )
الهوية : يتم استخدام وظيفة identity() لتحديد مدى تفرد كل اقتراح. يتلقى الاقتراح كمعلمة ويجب أن يُرجع سلسلة فريدة للاقتراح المعطى. هذه خاصية اختيارية وتقوم افتراضيًا بإرجاع القيمة المرتبطة بالمفتاح الأول، أي keys[0] . ومع ذلك، قد لا تعمل القيمة الافتراضية في كل مرة. على سبيل المثال، خذ بعين الاعتبار الكود التالي -

 /* Example Data source of Songs */
[
  { title : "God is Good" , artist : "Don Moen" } ,
  { title : "God is Good" , artist : "Paul Wilbur" } ,
  { title : "God is Good" , artist : "Micheal Smith" } ,
  { title : "El Shaddai" , artist : "Amy Grant" } ,
  ...
]

لنفترض أن المفاتيح مضبوطة على keys: ["title"] . بشكل افتراضي، تستخدم وظيفة identity() المفتاح الأول (أي العنوان ) لتحديد التفرد. لذا، إذا كنت تبحث عن God ، فستجد اقتراحًا واحدًا فقط معروضًا نظرًا لوجود 3 أغانٍ لها نفس خاصية title تمامًا . لعرض جميع الاقتراحات الثلاثة مع فنانين مختلفين، تحتاج إلى تعيين خاصية identity بحيث تقوم بإرجاع سلسلة فريدة -

 identity ( item ) = > ` ${ item . title } ${ item . artist } ` ;

يوصى بشدة بتعيين خيار تكوين identity() لإرجاع سلسلة فريدة عندما يكون مصدر البيانات الخاص بك عبارة عن مجموعة من الكائنات.

تحقق من الأمثلة الحية لمزيد من التوضيح.

؟ خطافات

يوجد حاليًا خطاف واحد متاح فقط:

updateHits: async (resultSet, loader) => Promise<resultSet> الذي يتم تنفيذه قبل عرض نتائج البحث للمستخدم ويمكن استخدامه لتجاوز الاقتراحات التي يعرضها فهرس البحث. (مفيد للفرز المخصص للنتائج أو تصفيتها أو إضافتها أو إزالتها. هذا الخطاف عبارة عن وظيفة غير متزامنة تتيح لك تقديم طلبات AJAX لجلب نتائج جديدة إذا لزم الأمر)

 // Example usage of "updateHits" hook
typeahead ( {
  input : document . querySelector ( ".myInput" ) ,
  source : {
    local : [ ] ,
    // ...
  } ,
  hooks : {
    updateHits : async ( resultSet , loader ) => {
      resultSet . hits . push ( { name : "new suggestion" } ) ; // add new suggestion
      // resultSet.hits.filter( ... ); // filter the suggestions
      // resultSet.hits.sort( ... );   // custom sort the suggestions
      // resultSet.count = 5000;       // to set the total results found

      /*** You can also make an AJAX request to fetch results ***/
      // loader(); // display the loader template
      // const response = await fetch('https://example.com');
      // const text = await response.text();
      // resultSet.hits = text && JSON.parse(text);
      // loader(false); // hide the loader template

      // resultSet.updateSearchIndex = true; // updates search index if necessary. Default `false`

      return resultSet ; // you must return the resultSet
    } ,
  } ,
  templates : {
    loader : ( ) => { ... } ,
  }
} ) ;

؟ التصميم (CSS)

يتم توفير بعض التصميم الأساسي مع الكتابة المسبقة. واجهة المستخدم متروكة لك تمامًا وقابلة للتخصيص حسب البيكسل. يمكنك استخدام الفئات التالية لإضافة/تجاوز الأنماط.

يتم تغليف ملف html بالكامل في حاوية تحتوي على فئة typeahead-standalone .
يحتوي عنصر الإدخال على فئة tt-input .
يحتوي عنصر التلميح على فئة tt-hint .
يتم تغليف قائمة الاقتراحات في حاوية تحتوي على فئة tt-list . (تتم إضافة فئة tt-hide عند عدم توفر أي اقتراحات)
يحتوي كل اقتراح على فئة tt-suggestion وإذا تم تحديد الاقتراح، فإنه يحتوي على فئة tt-selected بالإضافة إلى ذلك.
إذا تم تعيين خيار Highlight config على true ، فإن كل كتلة نصية مميزة لها فئة tt-highlight .

التصميم حتى الإصدار 3.xx

يمكنك إضافة الأنماط الخاصة بك عن طريق استهداف المحدد الأصلي .typeahead-standalone . على سبيل المثال، يمكننا تحديث لون الخلفية لكل اقتراح كما هو موضح أدناه -

 /* set background color for each suggestion */
. typeahead-standalone . tt-list . tt-suggestion {
  background-color : green;
}

لتجاوز التصميم الافتراضي، قم بتعيين خيار التكوين className واستخدمه كمحدد. لنفترض أنك قمت بتعيين className: "my-typeahead" ، ثم لتجاوز النمط عند التمرير/تحديد اقتراح، يمكنك استخدام:

 /* override styles */
. typeahead-standalone . my-typeahead . tt-list . tt-suggestion : hover ,
. typeahead-standalone . my-typeahead . tt-list . tt-suggestion . tt-selected {
 color : black;
 background-color : white;
}

التصميم للإصدار 4.xx وما فوق

بدءًا من v4.0 ، تم فصل JS وCSS مما يتيح تحكمًا أكبر في النمط. يمكن استرداد ملف CSS بالكامل إما من شبكة CDN أو من الأسفل ونسخه مباشرة إلى مشروعك مما يسمح لك بتجاهل/تجاوز أي أنماط حسب الضرورة.

 /***** basic styles *****/
. typeahead-standalone {
  position : relative;
  text-align : left;
  color : # 000 ;
}
. typeahead-standalone . tt-input {
  z-index : 1 ;
  background : transparent;
  position : relative;
}
. typeahead-standalone . tt-hint {
  position : absolute;
  left : 0 ;
  cursor : default;
  user-select : none;
  background : # fff ;
  color : silver;
  z-index : 0 ;
}
. typeahead-standalone . tt-list {
  background : # fff ;
  z-index : 1000 ;
  box-sizing : border-box;
  overflow : auto;
  border : 1 px solid rgba ( 50 , 50 , 50 , 0.6 );
  border-radius : 4 px ;
  box-shadow : 0 px 10 px 30 px 0 px rgba ( 0 , 0 , 0 , 0.1 );
  position : absolute;
  max-height : 70 vh ;
}
. typeahead-standalone . tt-list . tt-hide {
  display : none;
}
. typeahead-standalone . tt-list div [ class ^= "tt-" ] {
  padding : 0 4 px ;
}
. typeahead-standalone . tt-list . tt-suggestion : hover ,
. typeahead-standalone . tt-list . tt-suggestion . tt-selected {
  background : # 55acee ;
  cursor : pointer;
}
. typeahead-standalone . tt-list . tt-suggestion . tt-highlight {
  font-weight : 900 ;
}
. typeahead-standalone . tt-list . tt-group {
  background : # eee ;
}

يمكنك أيضًا استخدام القوالب لإضافة رأس وتذييل ونمط إضافي لكل اقتراح.

؟ قوالب

يمكن استخدام القوالب لتخصيص عرض القائمة. استخدامها اختياري تمامًا. حاليا، هناك 7 قوالب متاحة -

templates: {
  header : ( resultSet ) => '<h1>List of Countries</h1>' , /* Rendered at the top of the dataset */
  footer : ( resultSet ) => '<div>See more</div>' , /* Rendered at the bottom of the dataset */
  suggestion : ( item , resultSet ) => {   /* Used to render a single suggestion */
    return `<div class="custom-suggestion"> ${ item . label } </div>` ;
  } ,
  group : ( groupName , resultSet ) => {   /* Used to render a group */
    return `<div class="custom-group"> ${ groupName } </div>` ;
  } ,
  empty : ( resultSet ) => {   /* Rendered when the input query is empty */
    return `<div>Search for Colors...</div>` ;
    // OR (to display some suggestions by default)
    return [ { title : "France" } , { title : "Spain" } ] ;
  }
  loader : ( ) = > 'Loading...' , /* Rendered while awaiting data from a remote source */
  notFound : ( resultSet ) => '<span>Nothing Found</span>' , /* Rendered if no suggestions are available */
}

كما رأينا أعلاه، يأخذ كل قالب رد اتصال يجب أن يُرجع string يتم تفسيرها لاحقًا على أنها HTML. تتلقى القوالب أيضًا resultSet معلمات تحتوي على بنية كما هو موضح أدناه.

 resultSet = {
  query : '...' , // the input query
  hits : [ ... ] , // found suggestions
  count : 0 ,     // the total suggestions found in the search index
  limit : 5 ,     // the number of suggestions to show
  wrapper : DOMElement ,  // the container DOM element
}

لتسهيل التصميم، يتم تغليف كل قالب في عنصر div مع الفئة المقابلة. أي

header => class tt-header
footer => فئة tt-footer
suggestion => tt-suggestion فئة
group => فئة tt-group
loader => فئة tt-loader
empty => فئة tt-empty
notFound => فئة tt-notFound

؟ أسماء الفئات

يتيح لك خيار تكوين classNames ببساطة استبدال أسماء الفئات الافتراضية حسب اختيارك.

أسماء الفئات الافتراضية المستخدمة في الكتابة المسبقة هي كما يلي:

 const classNames = {
  wrapper : 'typeahead-standalone' ,  /* main container element */
  input : 'tt-input' ,
  hint : 'tt-hint' ,
  highlight : 'tt-highlight' ,
  list : 'tt-list' ,  /* container element for suggestions */
  hide : 'tt-hide' ,
  show : 'tt-show' ,
  selected : 'tt-selected' ,
  /* classes used within templates */
  header : 'tt-header' ,
  footer : 'tt-footer' ,
  loader : 'tt-loader' ,
  suggestion : 'tt-suggestion' ,
  group : 'tt-group' ,
  empty : 'tt-empty' ,
  notFound : 'tt-notFound' ,
} ;

على سبيل المثال، إذا كنت تريد استخدام اسم فئة مختلف لعنصر الإدخال ، فيمكنك تهيئة الكتابة المسبقة مثل هذا -

 typeahead ( {
  input : '...' ,
  source : '...' ,
  classNames : {
    input : 'my-custom-input-class'  // this class is used instead of tt-input
  }
} ) ;

واجهة برمجة التطبيقات

typeahead.reset()
typeahead.addToIndex()
typeahead.destroy()

الكتابة المسبقة. `reset(clearLocalSrc?: boolean)`

يعيد تعيين مثيل الكتابة المسبقة إلى الحالة التي كان عليها قبل أي تفاعل للمستخدم. يقوم بإزالة جميع العناصر من فهرس البحث باستثناء تلك التي تمت إضافتها عبر مصدر محلي. لإزالة جميع العناصر تمامًا، تقبل الدالة معلمة اختيارية يجب ضبطها على true . يقوم Reset() أيضًا بمسح الطلبات البعيدة المخزنة مؤقتًا.

 const instance = typeahead ( { /* options */ } ) ;
// clear search index except items added via Local source
instance . reset ( ) ;

// clears entire search index
instance . reset ( true ) ;

تعد واجهة برمجة التطبيقات هذه مفيدة في المواقف التي تحتاج فيها إلى إبطال البيانات بعد انقضاء فترة زمنية معينة.

الكتابة المسبقة. `addToIndex()`

إضافة عناصر إلى فهرس البحث. يكون مفيدًا عندما تريد جلب البيانات بنفسك ثم إضافتها إلى فهرس البحث. إنه مشابه لإضافة عناصر عبر المصدر المحلي.

 const instance = typeahead ( { /* options */ } ) ;
instance . reset ( true ) ; // or instance.reset();
instance . addToIndex ( [ 'Blue, Baige , Black' ] ) ;

الكتابة المسبقة. `destroy()`

يدمر مثيل الكتابة المسبقة، ويمسح فهرس البحث، ويزيل جميع معالجات الأحداث وينظف DOM. يمكن استخدامه إذا كنت ترغب في إلغاء تنشيط الكتابة المسبقة.

 const instance = typeahead ( { /* options */ } ) ;
instance . destroy ( ) ;

رموز الخطأ

فيما يلي مسرد صغير لرموز الأخطاء المحتملة التي قد يصادفها المرء

شفرة	وصف
e01	عنصر DOM للإدخال مفقود
e02	مصدر الاقتراحات مفقود/غير صحيح. يجب عليك توفير واحد على الأقل من المصادر الثلاثة المحتملة - محلي أو جلب مسبق أو بعيد بتنسيق المصدر المتوقع (المرجع)
e03	المفاتيح المفقودة
e04	فشل طلب الجلب المسبق
e05	فشل الطلب عن بعد

؟يساهم

هل أنت مهتم بالمساهمة في الميزات والإصلاحات؟

اقرأ المزيد عن المساهمة.

سجل التغيير

انظر سجل التغيير

؟ رخصة

يوسع

typeahead standalone

Typeahead-standalone.js

العرض التوضيحي/المستندات

➕ تثبيت

؟ الاستخدام

أتش تي أم أل

جافا سكريبت

؟ إعدادات

؟ مصدر

؟ خطافات

؟ التصميم (CSS)

؟ قوالب

؟ أسماء الفئات

واجهة برمجة التطبيقات

الكتابة المسبقة. `reset(clearLocalSrc?: boolean)`

الكتابة المسبقة. `addToIndex()`

الكتابة المسبقة. `destroy()`

رموز الخطأ

؟يساهم

سجل التغيير

؟ رخصة

GitHub sgrebnov/cordova plugin background download

Wa ch ull navra maza navsacha 2 2024 ull ovie Fr e Online On Strea ings

Wa ch navra maza navsacha 2 2024 ull ovie Online For Fr e Strea ings At Home

Wa ch the greatest of all time 2024 ull ovie Online For Fr e Strea ings At Home

wolfs 2024 f llmo ie f lmyz lla dow load ree 7 0p 4 0p a d 10 0p

GitHub actions/download artifact

chat.petals.dev

GPT Prompt Templates

GPTyped

waymo open dataset

SmartTube

Sunamu

wp functions

waymo open dataset

slugify

typeahead standalone

Typeahead-standalone.js

العرض التوضيحي/المستندات

➕ تثبيت

؟ الاستخدام

أتش تي أم أل

جافا سكريبت

؟ إعدادات

؟ مصدر

؟ خطافات

؟ التصميم (CSS)

؟ قوالب

؟ أسماء الفئات

واجهة برمجة التطبيقات

الكتابة المسبقة. reset(clearLocalSrc?: boolean)

الكتابة المسبقة. addToIndex()

الكتابة المسبقة. destroy()

رموز الخطأ

؟يساهم

سجل التغيير

؟ رخصة

الكتابة المسبقة. `reset(clearLocalSrc?: boolean)`

الكتابة المسبقة. `addToIndex()`

الكتابة المسبقة. `destroy()`