آفلاین
user-avatar

آموزش تگ کردن افراد

2 سال پیش
توسط تابش مطرح شد
آفلاین
user-avatar
تابش ( 3091 تجربه )
2 سال پیش
تخصص : برنامه نویس ارشد وب
Route::view('/tag','tag');
Route::view('/search','search');
Route::view('/search۲','searchtwo');

tag.blade.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-۸">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=۱.۰, maximum-scale=۱.۰, minimum-scale=۱.۰">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
<textarea></textarea>

<script src="/js/jquery.js"></script>
<script src="/js/jquery.caretposition.js"></script>
<script src="/js/jquery.sew.js"></script>
<?php
$url = url('/search');
?>
<script>
    $.ajax({
        url: '<?= $url ?>',
        data: '',
        success: function (json) {
            data = jQuery.parseJSON(json);
            var values = [];
                $.each(data, function (key, user) {
                   values.push({val: user.name, meta: user.password})
                });
            $('textarea').sew({values: values});// meta is extended search field

        }, error: function () {
            console.log('error');
        }
    });

</script>
</body>
</html>

search۲

<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-۸">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=۱">
</head>
<style>
    body {
        font: ۱۳px Helvetica, arial, freesans, clean, sans-serif;
        line-height: ۱.۴;
        color: #۳۳۳;
    }

    h۳ {
        color: #۸f۸f۸f;
    }

    .-sew-list-container {
        background: white;
        border: ۱px solid #DDD;
        border-radius: ۳px;
        box-shadow: ۰ ۰ ۵px rgba(۰, ۰, ۰, ۰.۱);
        min-width: ۱۸۰px;
    }

    .-sew-list {
        list-style: none;
        margin: ۰;
        padding: ۰;
        max-height: ۱۰۰px;
        overflow: scroll;
    }

    .-sew-list-item {
        display: block;
        padding: ۵px ۱۰px;
        border-bottom: ۱px solid #DDD;
        cursor: pointer;
    }

    .-sew-list-item small {
        color: #afafaf;
    }

    .-sew-list-item.selected {
        color: white;
        background: #۴۱۸۳C۴;
        text-decoration: none;
    }
</style>
<body>
<h۱>Hello world! jquery-sew demo.</h۱>
<h۳>enable auto-complete by typing @ </h۳>
<div>
    <h۴> Works on any textarea/input element from your document </h۴>
    <textarea style="width:۴۱۵px; resize:none;"></textarea>

    <h۵> Supports unique elements </h۵>
    <input type="text" style="width:۴۱۵px; resize:none;" />

    <h۵> Supports content editable elements</h۵>
    <div class="editable" contentEditable="true" style="width: ۴۱۵px; height: ۱۰۰px; border: ۱px solid #۸۸۸"></div>

    <h۵> Prevent repetition </h۵>
    <div class="editable-repeat" contentEditable="true" style="width: ۴۱۵px; height: ۱۰۰px; border: ۱px solid #۸۸۸"></div>
</div>
<?php
$url = url('/search');
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/۱.۸.۳/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.caretposition.js"></script>
<script type="text/javascript" src="/js/jquery.sew.js"></script>
<script>
    $(document).ready(function() {

        $.ajax({
            url: '<?= $url ?>',
            data: '',
            success: function (json) {
                data = jQuery.parseJSON(json);
                var values = [];
                $.each(data, function (key, user) {
                    values.push({val: user.name,meta:user.email})
                });
                var customItemTemplate = "<div><span /> <small /></div>";
                function elementFactory(element, e) {
                    var template = $(customItemTemplate).find('span')
                        .text('@' + e.val).end()
                        .find('small')
                        .text("(" + (e.meta || e.val) + ")").end();
                    element.append(template);
                };
                // here is how we use it
                $('textarea').sew({values: values, elementFactory: elementFactory});
                $('input').sew({unique: true, values: values, elementFactory: elementFactory});
                $('.editable').sew({unique: true, values: values, elementFactory: elementFactory});
                $('.editable-repeat').sew({repeat: false, unique: true, values: values, elementFactory: elementFactory});
                $('.editable-position').sew({repeat: false, unique: true, values: values, elementFactory: elementFactory});

            }, error: function () {
                console.log('error');
            }
        });

        // with repetition but unique flag
        var repeatedElements = [{val: 'johnny'}, {val: 'chanta'}, {val: 'chanta'}, {val: 'chanta'}];

    });
</script>
</body>
</html>

search

<?php

$result = [];
$users = \App\User::all();

if ($users) {
    foreach ($users as $key => $value) {

        $result[$key] = $value;

    }
}

echo json_encode($result);

?>

اگر بخواهید @ را عوض کنید با هر چی داخل فایل
jquery.sew.js

var pluginName = 'sew',
        defaults = {
            token: '@',
            elementFactory: elementFactory,
            values: [],
            unique: false,
            repeat: true
        };

منبع :
https://github.com/tactivos/jquery-sew

برای ارسال پاسخ باید وارد سایت شوید