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

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>

<?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

ثبت پرسش جدید

به همدیگه کمک کنیم

به کمال کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

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

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

به همدیگه کمک کنیم

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید