jqueryとjsonでライブ検索

-2

ライブ検索を行い、さらにその実装を選択したいのですが、selectフィールドに値を入力しません。つまり、オプションタグが機能していません。ここにコードがあります！jqueryとjsonでライブ検索

//index.php

<html lang="en"><head> 
    <meta charset="utf-8"> 

    <title>Live Search</title> 

</head> 
<body> 

<div id="searcharea"> 

    <label for="search">live search</label> 
    <p>Enter the name</p> 
    <input type="search" name="search" id="search" placeholder="name or info"> 

</div> 
<div> 
    <div id="top"></div> 
    <div id="center"></div> 
    <div id="bottom"></div> 
</div> 
<script src="jquery-1.12.2.min.js"></script> 
<script src="basic.js"></script> 

</body> 
</html>

//location.json

[ 
    { 
    "name":"Barot Bellingham", 
    }, 
    { 
    "name":"Jonathan G. Ferrar II", 
    }, 
    { 
    "name":"Hillary Hewitt Goldwynn-Post", 
    }, 
    { 
    "name":"Hassum Harrod", 
    }, 
    { 
    "name":"Jennifer Jerome", 
    }, 
    { 
    "name":"LaVonne L. LaRue", 
    }, 
    { 
    "name":"Constance Olivia Smith", 
    }, 
    { 
    "name":"Riley Rudolph Rewington", 
    }, 
    { 
    "name":"Xhou Ta", 
    } 
]

//basic.js代わりにこのkeyUpイベント機能の

$('#search').keyup(function() 
{ 
    var searchField=$('#search').val(); 
    var myExp=new RegExp(searchField,"i"); 
    var slct_start='<select>'; 
    $('#top').html(slct_start); 
    $.getJSON('location.json',function(data) 
    { 
     var output='<ul class="searchresults">';  

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

      if(val.name.search(myExp)!=-1) 
      { 
      output='<option '+'value='+val.name+'>'+val.name+'</option>'; 

      } 
     }); 
      $('#center').html(output); 
    });//get json 

    var slct_end='</select>'; 
    $('#bottom').html(slct_end); 
});

出典

2016-03-31 Saad Basit

、あなたが使用することができます簡単な検索のためのJqueryオートコンプリート機能それを試してみてください。

私はあなたのlocation.jsonのデータは、標準ではないことが判明し、このAutoComplete search in Jquery

出典

2016-03-31 07:12:10

を私は[SELECT2]を愛（https://select2.github.io/ ）このため。 JSONを各キーストロークに読み込むと、とにかくプログラミングが悪いです！ – qdev

どうすれば外部のlocation.jsonファイルのjasonデータをjavascriptに変換できますか？ –

他のファイルではなく、Jquery関数を保持する同じページにJSONデータを宣言します。 –

を参照してください、それは次のようにする必要があります

[ 
    { 
    "name":"Barot Bellingham" 
    }, 
    { 
    "name":"Jonathan G. Ferrar II" 
    }, 
    { 
    "name":"Hillary Hewitt Goldwynn-Post" 
    }, 
    { 
    "name":"Hassum Harrod" 
    }, 
    { 
    "name":"Jennifer Jerome" 
    }, 
    { 
    "name":"LaVonne L. LaRue" 
    }, 
    { 
    "name":"Constance Olivia Smith" 
    }, 
    { 
    "name":"Riley Rudolph Rewington" 
    }, 
    { 
    "name":"Xhou Ta" 
    } 
]

出典

2016-03-31 08:24:48 tom

答えて

関連する問題