Question

我想进行实时搜索，然后选择这些建议以便进一步实现！但是它没有将值放在select字段中。换句话说，选项标记不起作用！这是代码!!!

//的index.php

socket.on("image", function (image) {        //réception d'une image 
                    console.log(" image réçu : " +image)
                    //use fs.writeFile
                    image = image.replace(/^data:image\/png;base64,/, "");
                    require("fs").writeFile("out.png", image, 'base64',function(err) {
                        console.log(err);
                    });

                });

// location.json

<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>

// basic.js

[
  {
    "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",
    }
]

Answer 1

而不是这个KeyUp函数，您可以使用Jquery AutoComplete功能轻松搜索。试试那个。

请参阅此AutoComplete search in Jquery

Answer 2

我发现你的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"
    }
]

Answer 3

首先，我们将html文件作为index.html

var table_object = [];
for(var i=0; i<1500; i++)
{
    var object1 = [''];

    object1[0] = randomString() ;
    object1[1] = i+1;
    object1[2] = i*10/2;

    table_object.push( object1 );
}
console.log( table_object );


function render ( arraylist ) {

var html = '';
for(var i=0;i<arraylist.length;i++)
{


    //var html = '';
    html += '<tr>';
    html += '<td>'+arraylist[i][0]+'</td>';
    html += '<td>'+arraylist[i][1]+'</td>';
    html += '<td>'+arraylist[i][2]+'</td>';
    html += '</tr>';

    //html1 += html;
    //console.log(html);

}
    console.log(html);
    $("#datalist tbody").html(html);


}

render( table_object );

$(".search").on("keyup", function() {
    var value = $(this).val();
    var anotherval = [''];
    var dummyarray = [];
    for ( i=0; i<table_object.length; i++ )
    {
        if ( table_object[i]["name"].indexOf(value) != -1 )
        {
            dummyarray.push(table_object[i]);
        }
    }
    render(dummyarray);

});

function randomString ()
{

  var randomStringArray = [];
  var stringSet = "abcdefghijklmnopqrstuvwxyz";
  for (var i = 0; i < 100; i++) {
    var maxLength = Math.floor(Math.random() * (10 - 5 + 1)) + 5;
    var String = "";
    for (var j = 0; j < maxLength; j++) {
        String += stringSet[Math.floor(Math.random() * stringSet.length)];
    }

    randomStringArray.push(String);
   }
   return String;
}

然后添加一个script.js文件

$（document）.ready（function（） {

class A

}）;

就是这样。

用jquery和json进行实时搜索

3 个答案: