入力時にオートコンプリート機能を使いたいのですが、、、

Question

入力フォームでオートコンプリートを使用して候補を出すことはできているのですが、
候補の表示方法が、下記のように名前の先頭に・が付いてしまいます。
・nike
・newbaranse
・mizuno

候補の表示方法をセレクトボックスにしたいのですが、どうしたらよいのでしょうか？
よろしくお願いします。

blade

  <label for="brand_name" class="col-sm-2 control-label">ブランド名 </label>
  <input id="brand_name" name="key" class="input-sm form-control" placeholder="2文字以上入力" value="">
  .
  .
  .
<script>
$( function() {
    $( "#brand_name" ).autocomplete({
          source: 'brand_sample',
          minLength: 2,
          select: function(event, ui) {
                $('#brand_name').val(ui.item.value);
          }
    });
  } ); 
</script>         

Controller

public function sample(){

        $term = Input::get('term');
        $names = array()
        $brands = DB::table('b_name')
                        ->where('name','like','%'.$term.'%')
                        ->take(20)
                        ->get();
        
        foreach($brands as $brand){
            $names[] = ['label' => $brand->brand,'value' => $brand->brand];
        }
        
        return Response::json($names);
    }

Comments

[masaya_ohashi]

b_nameの中に入っているbrand自体にすでに「・」が付いているということはないですか？

Answer 1

もしかしてなんですけど、jQuery UIのCSSを入れ忘れてないですか？jQuery UI Autocompleteは.ui-menuでlist-style:noneが設定されて、ulの「・」が表示されないように抑制されています。
https://jqueryui.com/download/all/

Comments

[cofee]

回答ありがとうございます。
{!! assetTagEx('css', "css/common/jquery-ui.min.css") !!}
これを取り込んでいますが合っていますでしょうか？
また、テーブルの中のbrandには・は入っていません。

[cofee]

すいません。入力フォームのbladeには取り込んでいませんでした。
そちらを取り込むことで正常に動きました！
ありがとうございます。