برگرداندن نام با ajax داخل li

جاوااسکریپت -

3 سال پیش توسط کمال مطرح شد

ایجاد سوال جدید

آفلاین

کمال ( 3121 تجربه )

@kamalj

3 سال پیش

تخصص : برنامه نویس ارشد وب

لینک کوتاه اشتراک گذاری

سلام دوستان من یک input درست کردم که توش چند حرف قرار میدهم و خودش بصورت ajax میره توی دیتابیس و اسامی شبیه رو پیدا میکنه و برمیگردونه

function findnames() {
        $.ajax({
            url: '<?= $url ?>',
            data: {
                'name': document.getElementById('name').value,
            },
            success: function (json) {
                data = jQuery.parseJSON(json);

                $.each(data, function (key, user) {

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

البته در console.log
من چی بنویسیم که بصورت html بهم خروجی بده
من میخوام بگم به ازای هر اسم یک li درست کن و داخلش قرار بده اسم رو
باید چیکار کنم
مثلا مینویسم

  $.each(data, function (key, user) {
$(li).text(user.name);
                })

ولی فقط یکی رو برمیگردونه نه بیشتر !

بهترین پاسخ

انتخاب شده توسط کمال

آفلاین

کمال

3 سال پیش

خودم متوجه شدم

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<style>
    a{
        display: block;
        padding: 5px 0;
        background: #999999;
        margin: 5px 0;
    }
</style>
<input type="text" placeholder="name" id="name">

{{--<select name="test" id="branchname">--}}
{{----}}
{{--</select>--}}
<ul id="branchname">

</ul>

<?php
$url = url('/names');
?>
<script src="/js/app.js"></script>

</body>
<script>
    $(document).ready(function () {
        var name = $('#name');
        name.keyup(findnames);

        function findnames() {
            if(name.val().length <= 0){
                $('a').remove();
            }
            if(name.val().length > 0) {
                $.ajax({
                    url: '<?= $url ?>',
                    data: {
                        'name': document.getElementById('name').value,
                    },
                    success: function (json) {
                        data = jQuery.parseJSON(json);
                        var branchName = $('#branchname').empty();
                        $.each(data, function (key, user) {
                            $('<a/>', {
                                href:user.id,
                                text: user.name,
                            }).appendTo(branchName);
                        })
                    }, error: function () {
                        console.log('error');
                    }
                });
            }else{
                $('a').remove();
            }
        }
    });
</script>
</html>

الان درست شد

جاوااسکریپت

آفلاین

سیدعلی موسوی ( 143028 تجربه )

@juza66

3 سال پیش

تخصص : سی شارپ و پی اچ پی

لینک کوتاه اشتراک گذاری

سلام

شما تویی همون کنترلر li ها رو تویی یه حلقه ایجاد کن و بریز تویی یه متغییر و متغییر رو برگردون سمت ویو و سمت ویو کدهای جی کوئری در success ،دیتا دریافتی رو append کن و بصورت html

$('.bids').append(html)

آفلاین

کمال ( 3121 تجربه )

@kamalj

3 سال پیش

تخصص : برنامه نویس ارشد وب

لینک کوتاه اشتراک گذاری

@juza666

من توی کنترلر کاری نکردم کل کد ها اینه
Route

Route::get('/test','[email protected]');
Route::view('/names','names');

controller

  public function test()
    {
        return view('test');
    }

test.blade.php

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

<input type="text" placeholder="name" id="name">

<ul>
    <li></li>
</ul>

<?php
$url = url('/names');
?>
<script src="/js/app.js"></script>
<script>
    $(document).ready(function () {
        var name = $('#name');
        name.keyup(findnames);
    });

    function findnames() {
        $.ajax({
            url: '<?= $url ?>',
            data: {
                'name': document.getElementById('name').value,
            },
            success: function (json) {
                data = jQuery.parseJSON(json);

                $.each(data, function (key, user) {

                })
            }, error: function () {
                console.log('error');
            }
        });
    }
</script>

</body>
</html>

names.blade.php
صفحه ajax

<?php
$name = $_GET['name'];
if(!empty($name)){
    $result = [];
    $users = AppUser::where('name', 'LIKE', '%' . $name . '%')->get();

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

            $result[$key] = $value;

        }
    }

    echo json_encode($result);
}

?>

میشه لطفا دقیقا راهنمایی کنید کجا باید چی بنویسم
من هنوز توی ajax راه نیافتادم!

آفلاین

کمال ( 3121 تجربه )

@kamalj

3 سال پیش

تخصص : برنامه نویس ارشد وب

لینک کوتاه اشتراک گذاری

خودم متوجه شدم

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<style>
    a{
        display: block;
        padding: 5px 0;
        background: #999999;
        margin: 5px 0;
    }
</style>
<input type="text" placeholder="name" id="name">

{{--<select name="test" id="branchname">--}}
{{----}}
{{--</select>--}}
<ul id="branchname">

</ul>

<?php
$url = url('/names');
?>
<script src="/js/app.js"></script>

</body>
<script>
    $(document).ready(function () {
        var name = $('#name');
        name.keyup(findnames);

        function findnames() {
            if(name.val().length <= 0){
                $('a').remove();
            }
            if(name.val().length > 0) {
                $.ajax({
                    url: '<?= $url ?>',
                    data: {
                        'name': document.getElementById('name').value,
                    },
                    success: function (json) {
                        data = jQuery.parseJSON(json);
                        var branchName = $('#branchname').empty();
                        $.each(data, function (key, user) {
                            $('<a/>', {
                                href:user.id,
                                text: user.name,
                            }).appendTo(branchName);
                        })
                    }, error: function () {
                        console.log('error');
                    }
                });
            }else{
                $('a').remove();
            }
        }
    });
</script>
</html>

الان درست شد