Question

如何搜索姓氏并在文本框中显示值？

现在的问题是，当我键入字母 D 时，页面挂起并停止加载，将挂起。

图片

到目前为止，我有一个ajax和jquery代码，所以当我输入姓氏的第一个字母为 D 时，输入内容应该具有一个值，我该怎么做？

我的另一个问题是，您认为控制器<input>和output中的代码正确吗？还是语法无效？因为我正在使用Form Collectives

这是我的代码。

我的 控制器

    public function search(Request $request){
    if($request->ajax())
    {
        $output = "";
        $employees = DB::table('employeefms')->where('last_name','LIKE','%'.$request->search.'%')
                                             ->orWhere('firstname_name','LIKE','%'.$request->search.'%')->get();

        if($employees)
        {
            foreach($employees as $key => $employee){
                $output.='<input>'.$employee->employee_no.'</input>'.
                $output.='<input>'.$employee->last_name.'</input>'.
                $output.='<input>'.$employee->first_name.'</input>';
            }
            return  Response($output);
        }
    }
}

我的搜索框

  <input type="text" class="form-control" id="search" name="search">

我的表单文本框，我使用的格式为 Form Collectives

 {{Form::text('last_name', '',['class' => 'form-control', 'placeholder' => 'Last Name'])}}

我的 Ajax代码

$('#search').on('keyup',function(){
           $value=$(this).val();
           $.ajax({
                   type : 'get',
                   url  : '{{ URL::to('admin/employeemaintenance') }}',
                   data : {'search':$value},
                   success:function(data){
                           $('input').html(data);
                   }
           });
    })

我的Ajax链接

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

我的 表格输入

在这里我使用javascript隐藏和显示

  <div style="display:none" id="sectiontohide">
        <div class="form-group col-md-2">
                {{Form::label('employee_no', 'Employee No.')}}
                {{Form::text('employee_no', '',['class' => 'form-control', 'placeholder' => 'Employee No.'])}}
        </div>

    <div class="row">
        <div class="form-group  col-md-4">
                {{Form::label('last_name', 'Last Name')}}
                {{Form::text('last_name', '',['class' => 'form-control', 'placeholder' => 'Last Name'])}}
        </div>

        <div class="form-group  col-md-4">
                    {{Form::label('first_name', 'First Name')}}
                    {{Form::text('first_name', '',['class' => 'form-control', 'placeholder' => 'First Name'])}}
        </div>
    </div>

    <div class="row">
        <div class="form-group  col-md-4">
                    {{Form::label('middle_name', 'Middle Name')}}
                    {{Form::text('middle_name', '',['class' => 'form-control', 'placeholder' => 'Middle Name'])}}
        </div>

        <div class="form-group  col-md-4">
                    {{Form::label('nick_name', 'Nick Name')}}
                    {{Form::text('nick_name', '',['class' => 'form-control', 'placeholder' => 'Nick Name'])}}
        </div>
    </div>
    </div>

这是我的 Java脚本

   function toggle_div_fun(id) {

var divelement = document.getElementById(id);

if(divelement.style.display == 'none')
   divelement.style.display = 'block';
else
   divelement.style.display = 'none';
}

Answer 1

有两种方法可以做到：

typeahead.js是为此目的而创建的一个软件包。

https://twitter.github.io/typeahead.js/

将您的JavaScript代码更改为以下内容：

$('#search').on('change',function(){

    $value = $(this).val();
    $.ajax({
        type : 'get',
        url  : '{{ URL::to('admin/employeemaintenance') }}',
        data : {'search':$value},
        success:function(data){
            if (data.success) {
                $('input').html(data.value);
            }
        }
    });
})

我在这里做了一个更改；我是在更改时而不是在键盘上输入键，因为键盘不是人们将事物输入输入的唯一方式。

这些对PHP的更改：

public function search(Request $request){
    $output = "";
    $employees = DB::table('employeefms')->where('last_name','LIKE','%'.$request->search.'%')
        ->orWhere('firstname_name','LIKE','%'.$request->search.'%')
        ->get();

        $output = '';

        if(!empty($employees) || !blank($employees) ) {
            foreach($employees as $key => $employee){
                $output.='<input>'.$employee->employee_no.'</input>'.
                $output.='<input>'.$employee->last_name.'</input>'.
                $output.='<input>'.$employee->first_name.'</input>';
            }
        } else {

            return Response::json(['success' => false]);

       }

       return Response::json(['success' => true, 'value' => $output]);

}

有关此内容的更多信息，请参见：

https://laravel.com/docs/5.7/responses#json-responses

Laravel / AJAX-搜索框和搜索姓氏并将其显示在Texbox上

1 个答案: