Kendo\UI\AutoComplete PHP Code Examples

Example #1

0

Show file

File: right-to-left-support.php Project: neevan1e/Done

<?php

require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
?>

<div class="demo-section">
    <div class="k-rtl">
        <h2>USA STATES:</h2>
<?php 
$states = array('Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'District of Columbia', 'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Northern Marianas Islands', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Puerto Rico', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Virgin Islands', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data($states);
$autoComplete = new \Kendo\UI\AutoComplete('states');
$autoComplete->dataSource($dataSource);
echo $autoComplete->render();
?>
    </div>
</div>
<style scoped>
    .demo-section {
        width: 250px;
        margin: 35px auto 50px;
        padding: 30px;
    }
    .demo-section h2 {
        text-transform: uppercase;
        font-size: 1.2em;
        margin-bottom: 10px;
    }
</style>

Example #2

0

Show file

File: template.php Project: neevan1e/Done

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    header('Content-Type: application/json');
    $result = new DataSourceResult('sqlite:..//sample.db');
    echo json_encode($result->read('Customers', array('ContactName', 'CustomerID', 'CompanyName')));
    exit;
}
require_once '../include/header.php';
$read = new \Kendo\Data\DataSourceTransportRead();
$read->url('template.php')->type('POST');
$transport = new \Kendo\Data\DataSourceTransport();
$transport->read($read);
$schema = new \Kendo\Data\DataSourceSchema();
$schema->data('data')->total('total');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->transport($transport)->schema($schema);
$autoComplete = new \Kendo\UI\AutoComplete('customers');
$autoComplete->minLength(1)->dataTextField('ContactName')->dataSource($dataSource)->height(370)->attr('style', 'width:400px')->headerTemplate(<<<TEMPLATE
<div class="dropdown-header"><span class="k-widget k-header">Photo</span><span class="k-widget k-header">Contact info</span></div>
TEMPLATE
)->template(<<<TEMPLATE
<span class="k-state-default"><img src="../content/web/Customers/#= CustomerID #.jpg" alt="#= CustomerID #" /></span><span class="k-state-default"><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></span>
TEMPLATE
);
?>

<div class="demo-section">
<h2>Customers</h2>
<?php 
echo $autoComplete->render();
?>
    <p>

Example #3

0

Show file

File: events.php Project: neevan1e/Done

<?php

require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
$states = array('Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'District of Columbia', 'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Northern Marianas Islands', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Puerto Rico', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Virgin Islands', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data($states);
$autoComplete = new \Kendo\UI\AutoComplete('states');
$autoComplete->dataSource($dataSource)->change('change')->select('select')->open('open')->close('close')->dataBound('dataBound');
?>
<div id="taxi">
    <label for="states">Select a state in USA:</label>
<?php 
echo $autoComplete->render();
?>
</div>
<div class="demo-section">
    <h3 class="title">Console log</h3>
    <div class="console"></div>
</div>

<script>
    function open() {
        kendoConsole.log("event :: open");
    };

    function close() {
        kendoConsole.log("event :: close");
    };

    function change() {

Example #4

0

Show file

File: serverfiltering.php Project: neevan1e/Done

    $result = new DataSourceResult('sqlite:..//sample.db');
    echo json_encode($result->read('Products', array('ProductID', 'ProductName'), $request));
    exit;
}
require_once '../include/header.php';
$transport = new \Kendo\Data\DataSourceTransport();
$read = new \Kendo\Data\DataSourceTransportRead();
$read->url('serverfiltering.php')->contentType('application/json')->type('POST');
$transport->read($read)->parameterMap('function(data) {
              return kendo.stringify(data);
           }');
$schema = new \Kendo\Data\DataSourceSchema();
$schema->data('data')->total('total');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->transport($transport)->schema($schema)->serverFiltering(true);
$autoComplete = new \Kendo\UI\AutoComplete('products');
$autoComplete->dataSource($dataSource)->dataTextField('ProductName')->ignoreCase(false)->attr('style', 'width:250px');
?>
<div class="demo-section">
    <h2>Products</h2>
<?php 
echo $autoComplete->render();
?>
</div>
<style scoped>
    .demo-section {
        width: 250px;
        margin: 35px auto 50px;
        padding: 30px;
    }
    .demo-section h2 {

Example #5

0

Show file

File: index.php Project: neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>
<div id="shipping">
    <label for="countries" class="info">Shipping countries:</label>
    <?php 
$countries = array('Albania', 'Andorra', 'Armenia', 'Austria', 'Azerbaijan', 'Belarus', 'Belgium', 'Bosnia & Herzegovina', 'Bulgaria', 'Croatia', 'Cyprus', 'Czech Republic', 'Denmark', 'Estonia', 'Finland', 'France', 'Georgia', 'Germany', 'Greece', 'Hungary', 'Iceland', 'Ireland', 'Italy', 'Kosovo', 'Latvia', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macedonia', 'Malta', 'Moldova', 'Monaco', 'Montenegro', 'Netherlands', 'Norway', 'Poland', 'Portugal', 'Romania', 'Russia', 'San Marino', 'Serbia', 'Slovakia', 'Slovenia', 'Spain', 'Sweden', 'Switzerland', 'Turkey', 'Ukraine', 'United Kingdom', 'Vatican City');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data($countries);
$autoComplete = new \Kendo\UI\AutoComplete('countries');
$autoComplete->dataSource($dataSource)->filter('startswith')->placeholder('Select country...')->separator(', ');
echo $autoComplete->render();
?>
    <div class="hint">Start typing the name of an European country</div>
</div>

<style scoped="scoped">
    .info {
        display: block;
        line-height: 22px;
        padding: 0 5px 5px 0;
        color: #36558e;
    }

    #shipping {
        width: 482px;
        height: 152px;
        padding: 110px 0 0 30px;
        background: url('../content/web/autocomplete/shipping.png') transparent no-repeat 0 0;

Example #6

0

Show file

File: keyboard-navigation.php Project: neevan1e/Done

<?php

require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
?>
<div class="demo-section">
    <h2>Choose country: </h2>
<?php 
$countries = array('Albania', 'Andorra', 'Armenia', 'Austria', 'Azerbaijan', 'Belarus', 'Belgium', 'Bosnia & Herzegovina', 'Bulgaria', 'Croatia', 'Cyprus', 'Czech Republic', 'Denmark', 'Estonia', 'Finland', 'France', 'Georgia', 'Germany', 'Greece', 'Hungary', 'Iceland', 'Ireland', 'Italy', 'Kosovo', 'Latvia', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macedonia', 'Malta', 'Moldova', 'Monaco', 'Montenegro', 'Netherlands', 'Norway', 'Poland', 'Portugal', 'Romania', 'Russia', 'San Marino', 'Serbia', 'Slovakia', 'Slovenia', 'Spain', 'Sweden', 'Switzerland', 'Turkey', 'Ukraine', 'United Kingdom', 'Vatican City');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data($countries);
$autoComplete = new \Kendo\UI\AutoComplete('country');
$autoComplete->dataSource($dataSource)->filter('startswith')->placeholder('Select country...')->attr('style', 'width: 250px')->attr('accesskey', 'w')->separator(', ');
echo $autoComplete->render();
?>
</div>

<ul class="keyboard-legend">
    <li>
        <span class="button-preview">
            <span class="key-button leftAlign wider"><a target="_blank" href="http://en.wikipedia.org/wiki/Access_key">Access key</a></span>
            +
            <span class="key-button">w</span>
        </span>
        <span class="button-descr">
            focuses the widget
        </span>
    </li>
</ul>

<ul class="keyboard-legend">

PHP Kendo\UI\AutoComplete Examples