Popojicms

AutoComplete textbox menggunakan jQuery dan PHP di popojicms

AutoComplete textbox menggunakan jQuery dan PHP  di popojicms

AutoComplete textbox adalah sangat user friendly untuk proyek web. Dalam tutorial ini, Anda dapat mempelajari bagaimana menerapkannya seperti mesin pencari google di proyek website Anda. Menggunakan jQuery UI yang kita dapat dengan mudah menampilkan auto suggestion dari database di bawah textbox.

Mari kita mulai tutorial autocomplete textbox. Di sini kita akan menampilkan textbox untuk search artikel. Sekali pengguna mulai memasukkan 1 huruf maka, auto suggestion akan menampilkan artikel terdaftar di bawah textbox. Auto suggestion  ini akan diambil dari tabel database post_description.

 

Widget

Fungsi ini untuk mengambil data dari table post_description

public function getTitleSearch($lang)
    {
	$post = $this->core->podb->from('post_description')
		->select(array('post_description.title', 'post_description.content'))
		->where('post_description.id_language', $lang)
		->fetchAll();
        return $post;
    }

 

jQuery UI Library & jQuery

Kita perlu meliputi Library jQuery, jQuery UI Library, dan jQuery UI stylesheet.

asset('/css/jquery-ui.css');?>">


 

Mendefinisikan fungsi autocomplete dan memberikan file sumber.

$(function() {
var availableTitles = [“Title 1”, ”Title 2”, “Title 3”];
 $( "#search" ).autocomplete(
{ minLength: 1 },
{ source: availableTitles }
);
});

 

HTML

Hanya memerlukan HTML berikut.

 

File PHP

Kita bisa mendapatkan nilai textbox oleh istilah getTitleSearch dari string kueri yang dimasukan dalam fungsi availableTitles. Sekarang kita akan mengambil data dari tabel post_description. Pada akhirnya kita akan mendapatkan data yang disaring dalam textbox yang kita masukan.

post()->getTitleSearch(WEB_LANG_ID);
foreach($searchs_post as $search_post){
?>"pocore()->call->postring->cuthighlight('post', $search_post['title'], '25');?>", 

 

Itu semua, langkah-langkah ini sudah cukup untuk pelaksanaan autocomplete textbox di PHP.

Bila ada yang kurang jelas silahkan tinggalkan komentar di bawah ini.

Share This Post

Leave Comment

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.