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

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

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

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

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

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

إذا كنت تبحث عن إطار عمل لـ 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. يمكنك الإطلاع على صفحة الدمج للمزيد من التوضيحات.

مكتبة 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 );
    }
  });
} );

إضافة 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);
    }
});

تتميز هذه بالإضافة باحتوائها على كل الخصائص التي تحتاجها. فهي تدعم جلب الاقتراحات من السيرفر على هيئة 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"}
 ]

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

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

JavaScript :

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

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;
  }
});

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

مثال للكود :

JavaScript :

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

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

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

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

دعم للمتصفحات الحديثة. بالإضافة إلى ميزة الحماية من هجمات XSS.

إذا كنت تشتغل على 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);
}

ذكرنا 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}
    />
  );

الكل يعرف موقع 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();
}

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

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