کمال
4 سال پیش توسط کمال مطرح شد
0 پاسخ

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

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


لاراول
تگ‌های محبوب
لاراول
php
laravel
متفرقه
reactjs
عمومی
html_css
nodejs
vuejs
وردپرس
پایتون
css
فلاتر
react
javascript
ثبت پرسش جدید

ثبت اولین پاسخ و دریافت ۵۰ امتیاز

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

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

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