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
};
به کمال کمک کنید تا مشکل خودش را حل کند؛ اینطور میتوانیم با هم پیشرفت کنیم.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟