14 إضافة جي كويري لعمل Autocomplete

|
14 إضافة جي كويري لعمل Autocomplete

البحث المباشر Live Search هي طريقة لعمل البحث عبر تقنية AJAX لجلب الاقتراحات بدون الحاجة إلى تحديث كامل الصفحة. هذه الطريقة تختلف عن حقل الإدخال من نوع autocomplete. فحقل البحث المباشر سيكون مُبرمج لكي يقوم بجلب الاقتراحات –البيانات- من المصدر – السيرفر- ليتم عرضهم.

استعمال البحث المباشر سيجعل الموقع سهل الاستخدام أثناء عملية البحث أو القيام بأي إجراء يتطلب عرض الاقتراحات. بغض النظر على اللغة البرمجية المستعملة في السيرفر PHP، Java، Python، Ruby، فالجافا سكريبت يمكنها الاتصال لأي سيرفر بأي لغة كان عبر AJAX.

فإسم البحث المباشر Live search لديها عدة أسماء أخرى من بينها الإكمال التلقائي Autocomplete أو type ahead.

في هذه التدوينة ستجد 14 إضافة لـ jQuery لإضافة خاصية البحث المباشر Live search في مشاريعك.

1. Ajax Live Search


Ajax Live Search

إضافة لـ jQuery رائعة مفتوحة المصدر، تتوفر على توثيق رسمي جيد وتدعم المتصفحات Chrome، Firefox، Safari، Opera و IE8. بها ميزة إضافية هي إمكانية عرض الاقتراحات على شكل جدول.

2. Semantic UI Search Component


Semantic UI Search Component

إذا كنت تبحث عن إطار عمل لـ CSS، فألقي نظرة على Semantic UI. فهو يحتوي على عنصر خاص بالبحث يتيح لك عمل خاصية البحث المباشر بشكل سهل. إليك المثال التالي :

HTML :
<div class="ui search">
  <input class="prompt" type="text" placeholder="Search GitHub...">
  <div class="results"></div>
</div>

JavaScript :
$('.ui.search')
  .search({
    apiSettings: {
      url: '//api.github.com/search/repositories?q={query}'
    },
    fields: {
      results : 'items',
      title   : 'name',
      url     : 'html_url'
    },
    minCharacters : 3
  })
;

تتميز هذه الإضافة بكونها سهلة الإعداد. مع إمكانية إعدادها مع API وتعديلها على حسب حاجتك. ويوفر Semantic UI كذلك إضافات موجهة لـ React، Meteor، Ember و Angular. يمكنك الإطلاع على صفحة الدمج للمزيد من التوضيحات.

3. jQueryUI Autocomplete


jQueryUI Autocomplete

مكتبة jQuery تحتوي على مكتبات ملحقة عديدة ومن بينها jQuery UI الموجهة لواجهات المستخدم. فهذه المكتبة تتوفر كذلك على إضافة البحث المباشر أو الإكمال التلقائي لدمجها في مشاريعك.

HTML :
<div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

JavaScript :
$( function() {
  function log( message ) {
    $( "<div>" ).text( message ).prependTo( "#log" );
    $( "#log" ).scrollTop( 0 );
  }

  $( "#birds" ).autocomplete({
    source: "search.php",
    minLength: 2,
    select: function( event, ui ) {
      log( "Selected: " + ui.item.value + " aka " + ui.item.id );
    }
  });
} );

4. DevBridge jQuery AutoComplete


DevBridge jQuery AutoComplete

إضافة DevBridge jQuery AutoComplete صغيرة الحجم تُمكنك من إضافة خاصية البحث المباشر بشكل سهل مع إعدادات متنوعة. كما أن التوثيق الرسمي الخاصة بهذه الإضافة ممتاز وبه كل المعلومات الضرورية للعمل معها.

مثال بسيط للإضافة :

HTML :
<input type="text" name="country" id="autocomplete"/>

JavaScript :
$('#autocomplete').autocomplete({
    serviceUrl: '/autocomplete/countries',
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

5. EasyAutocomplete


EasyAutocomplete

تتميز هذه بالإضافة باحتوائها على كل الخصائص التي تحتاجها. فهي تدعم جلب الاقتراحات من السيرفر على هيئة JSON، XML أو نص عادي. وتدعم كذلك دوال لمعالجة الاقتراحات –البيانات- عند قراءتها من المصدر.

مثال لطريقة اشتغال EasyAutocomplete :

HTML :
<input id="countries"/>

JavaScript :
var options = {

  url: "resources/countries.json",

  getValue: "name",

  list: {
    match: {
      enabled: true
    }
  },

  theme: "square"
};

$("#countries").easyAutocomplete(options);

JSON :
[
  {"name": "Afghanistan", "code": "AF"},
  {"name": "Aland Islands", "code": "AX"},
  {"name": "Albania", "code": "AL"},
  {"name": "Algeria", "code": "DZ"},
  {"name": "American Samoa", "code": "AS"}
 ]

6. PixaBay jQuery-autoComplete


PixaBay jQuery-autoComplete

يعتبر موقع Pixabay من أضخم المواقع التي توفر صور عالية الجودة بشكل مجاني. فهو كذلك وفر إضافة مفتوحة المصدر للجي كويري مبنية على الإضافة رقم 4 التي رأيناها أعلاه.

مثال لطريقة اشتغال إضافة PixaBay jQuery-autoComplete :

JavaScript :
$('input[name="q"]').autoComplete({
  source: function(term, response){
    $.getJSON('/some/ajax/url/', { q: term }, function(data){ response(data); });
  }
});

7. Marco Polo


Marco Polo

Marco Polo إضافة لعمل autocomplete فهي تدعم التخزين المؤقت caching، تخصيص النمط. هذه الإضافة تتطلب نسخة جي كويري 1.4.3 فما فوق مع دعم كل المتصفحات بما في ذلك IE6.

الاشتغال مع إضافة Marco Polo سهل جدا. مثال لذلك :

HTML :
...
<head>
  <script src="jquery.min.js"></script>
  <script src="jquery.marcopolo.min.js"></script>
</head>
...
<body>
  <input type="text" name="userSearch" id="userSearch">
</body>

JavaScript :
$('#userSearch').marcoPolo({
  url: '/users/search',
  formatItem: function (data, $item) {
    return data.first_name + ' ' + data.last_name;
  },
  onSelect: function (data, $item) {
    window.location = data.profile_url;
  }
});

8. xDSoft Autocomplete Like Google


xDSoft Autocomplete Like Google

إضافة لـ jQuery صغيرة الحجم تدعم جلب الاقتراحات من ملف محلي أو من السيرفر.

مثال للكود :

JavaScript :
$('#remote_input2').autocomplete({source:[
 {
  url:"/component/jquery_plugins/?task=demodata&q=%QUERY%",
  type:'remote'
 },
 ["One","Two","Three"]
]});

9. jQuery Typeahead Search


jQuery Typeahead Search

تتميز إضافة jQuery Typeahead Search بتعدد الخصائص المتاحة. ودعمها لجل المتصفحات الحديثة.

أمثلة لكيفية الاشتغال مع هذه الإضافة تجدها هنا.

10. Algolia Autocomplete


Algolia Autocomplete

تتيح إضافة Algolia Autocomplete إمكانية إضافة البحث المباشر بشكل سريع لأي حقل إدخال. كما يمكنها العمل كذلك مع خدمة محرك البحث لـ Algolia .
دعم للمتصفحات الحديثة. بالإضافة إلى ميزة الحماية من هجمات XSS.

11. ng-bootstrap Typeahead


ng-bootstrap Typeahead

إذا كنت تشتغل على Angular و Bootstrap في مشاريعك. فالأفضل الانتقال إلى منصة ng-bootstrap. فهي تتوفر على عنصر البحث المباشر مثله مثل باقي الإضافات الأخرى.

مثال لطريقة اشتغاله مع Angular. المثال يقوم بالبحث في موسوعة ويكيبيديا :

HTML :
<div class="form-group" [class.has-danger]="searchFailed">
  <label for="typeahead-http">Search for a wiki page:</label>
  <input id="typeahead-http" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" placeholder="Wikipedia search" />
  <span *ngIf="searching">searching...</span>
  <div class="form-control-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
</div>

TypeSript :
@Injectable()
export class WikipediaService {
  constructor(private _jsonp: Jsonp) {}

  search(term: string) {
    if (term === '') {
      return Observable.of([]);
    }

    let wikiUrl = 'https://en.wikipedia.org/w/api.php';
    let params = new URLSearchParams();
    params.set('search', term);
    params.set('action', 'opensearch');
    params.set('format', 'json');
    params.set('callback', 'JSONP_CALLBACK');

    return this._jsonp
      .get(wikiUrl, {search: params})
      .map(response => <string[]> response.json()[1]);
  }
}

@Component({
  selector: 'ngbd-typeahead-http',
  templateUrl: './typeahead-http.html',
  providers: [WikipediaService],
  styles: [`.form-control { width: 300px; display: inline; }`]
})
export class NgbdTypeaheadHttp {
  model: any;
  searching = false;
  searchFailed = false;

  constructor(private _service: WikipediaService) {}

  search = (text$: Observable<string>) =>
    text$
      .debounceTime(300)
      .distinctUntilChanged()
      .do(() => this.searching = true)
      .switchMap(term =>
        this._service.search(term)
            .do(() => this.searchFailed = false)
            .catch(() => {
              this.searchFailed = true;
              return Observable.of([]);
            }))
      .do(() => this.searching = false);
}

12. React Autosuggest


React Autosuggest

ذكرنا Angular فلابد أن نذكر كذلك React.
React Autosuggest هي مكتبة مفتوحة المصدر موجهة لمنصة React ولا تتطلب مكتبة jQuery. وتتميز بتعدد الإعدادات وإمكانية دمجها مع Redux و Flux.

مثال للعنصر Autosuggest على React :

  return (
    <Autosuggest
      suggestions={suggestions}
      onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
      onSuggestionsClearRequested={this.onSuggestionsClearRequested}
      getSuggestionValue={getSuggestionValue}
      renderSuggestion={renderSuggestion}
      inputProps={inputProps}
    />
  );

13. W3Schools Ajax Live Search


W3Schools Ajax Live Search

الكل يعرف موقع W3Schools فهو يوفر شروحات مبسطة في ميدان IT. الموقع يوفر مكتبة للجافا سكريبت غير مبنية على جي كويري لإضافة البحث المباشر في أي موقع.

في المثال التالي طريقة لاستخدام هذه المكتبة مع PHP وجلب البيانات على هيئة XML :

HTML :
<form>
  <input type="text" size="30" onkeyup="showResult(this.value)">
  <div id="livesearch"></div>
</form>

JavaScript:
function showResult(str) {
  if (str.length==0) {
    document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("livesearch").innerHTML=this.responseText;
      document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
  }
  xmlhttp.open("GET","livesearch.php?q="+str,true);
  xmlhttp.send();
}

14. WordPress Live Search


WordPress Live Search

في حالة استخدامك للووردبريس فقد تحتاج إلى إضافة حقل البحث المباشر كميزة لموقعك. هذه الإضافة المقترحة من Dave Ross تتيح لك ذلك بدون الحاجة إلى كتابة أسطر برمجية معقدة. كل ما تحتاجه هو تثبيت الإضافة على WordPress. فهي تدعم أغلب الثيمات Themes، مع إمكانية تعديل إعداداتها من خلال لوحة التحكم.

خلاصة

كانت هذه مجموعة من الإضافات التي ستساعدك في إضافة خاصية البحث المباشر Live search في مشاريعك. فهي سهلة التضمين ولا تتطلب مجهود كبير لإعدادها.




إضافات تطوير جافاسكريبت javascript jquery

مواضيع ذات صلة