px-autocomplete-jquery

description

Allows to filter selective data and add new data. It works like a SELECT object but provides filtering with a JSON data block. Allows you to perform live search from database with AJAX url. If the written data is not in the data block, it marks it as new, so it provides an opportunity to define it like an INPUT object.

description TR

Seçimli verileri süzmeye ve yeni verileri eklemeye olanak tanır. SELECT nesnesi gibi çalışır ancak JSON data bloğu ile filtreleme olanağı sağlar. AJAX url ile veritabanından canlı arama yapmanıza imkan verir. Yazılan veri eğer data bloğunda yoksa yeni olduğunu işaretler bu sayene INPUT nesnesi gibi yani tanımlama imkanı sağlar.

install

npm i jquery

npm i px-autocomplete-jquery

html

<div id="objectid"></div>
or
<div id="objectid" data-name="requestname" data-result-max-height="300" data-style="" data-placeholder="" data-new-text="new" data-registered-text="registered" data-alert-text="No record available!"></div>
or
<select id="objectid" name="city">
<option valeu="01">Adana</option>
<option valeu="06" selected="true">Ankara</option>
<option valeu="16">Bursa</option>
</select>

options attributes

data-name="requestname"
data-result-max-height="300"
data-style=""
data-placeholder=""
data-new-text="new"
data-registered-text="registered"
data-alert-text="No record available!"

css

@import "~px-autocomplete-jquery/px-autocomplete.css";

javascript - jquery

require('px-autocomplete-jquery');

init

$("#objectid").pxautocomplete({
jsondata: [{ val: '1', image: null, text: 'data 1' }, ...],
ajaxpage: 'api/searchpage',
name: "requestname",
selected_value: null,
selected_text: null,
maxheight: '100',
placeholder: '',
registered_text: 'registered',
image_title: 'Show Image',
new_text: 'new',
alert_text: 'No record available!',
style: "background:#fff; color:#444",
class: "extraclass default null", focuscallback: function(e){},
callback : function(){}
});

using php with ajax

URL: http://localhost/api/searchpage

PHP CODE EXAMPLE:

$text = $_POST["text"];

... "your php codes" ...

$resultdata = [['val' => 1, 'text' => 'data 1', 'image' => 'imageurl or null or undefined'], ...];

echo json_encode($resultdata);

set data:

$("#objectid").pxautocomplete("set", { val: '16', image: 'http://127.0.0.1:8000/images/logo.png', text: 'Bursa' });

set new json data:

$("#objectid").pxautocomplete("setjsondata", [{ val: '16', image: 'http://127.0.0.1:8000/images/logo.png', text: 'Bursa' }, ... ]);

view:

1.

2.

3.

4.

5.