Jquery 自动完成小部件实现

Question

我正在尝试将普通字段转换为自动完成并进行 ajax 调用以获取 JSON 中的数据，然后将其设置为该自动完成。

我对 JQUERY 了解不多，我花了大约 5-6 个小时才知道在自动完成字段上使用任何功能之前我必须进行初始化。

到目前为止我做了什么 我设法初始化并将我的文本字段转换为自动完成并使用检查选项检查它是否显示自动完成，并且还能够进行 ajax 调用，该调用正在拉取数据验证使用 f12 网络 option.But它没有在我的自动完成选项中显示为提前输入。

HTML

<div id ="myName">
    <table class="some_class">
        <tbody>
            <tr>
                <td >
                    <label>NAMES</label>
                </td>
            </tr>
            <tr>
                <td >
                    <input type="text" id="nameText" />
                </td>
            </tr>
        </tbody>
    </table>            
</div>

初始化部分

    myName.on('valueChange',function (value){
    $("#nameText").autocomplete({
       appendTo:"#nameText",
       source:function(event,ui){
    var name=myName.value();
    $.ajax({
    url: "www.getmeSomeData.com/query/name:"+name,
    type:"GET".
    dataType:"json",
    success:function(result){
    //set this result in autocomplete which I am not sure how to do
    }
    });
    },minLength:1});
    });

$("#nameText").focus(function(even,ui){
$((this).data("uiAutocomplete").search$(this).val());
});

问题

1.The 自动完成不显示任何结果，即使从 ajax 调用我看到 json 数据来了。 2.The 只有在我输入 abc 然后将光标移到其他地方然后单击它回来之后才会开始值更改，在此之前什么都没有 invokes.Where 正如我预期的那样，只要我输入 a 或 ab 或 abc 它应该 ajax 调用并拉取自动完成下拉列表中显示的数据。

有人可以帮忙吗？我没有做研究就来这里，但我想我尝试了很多东西但没有任何效果所以我完全 confused.Kindly 帮助我，我已经花了大约 2 天的时间。

提前致谢。

Answer 1

我终于弄清楚了我的 code.I 中的问题是什么实际上无法向我的输入添加选项 autocomplete.To 让它工作我需要用[更新我的 html =13=]

HTML 只需替换 <input class="nameClass" type="text" id="nameText" />

并且jquery部分需要更新，以上只是一个非常新手的尝试。

 1. I should have used $.each($(".nameClass"), function(index, item) {
 2. and then $(item).autocomplete
 3. Also in source should have used source:function(request,response)
 4. In the ajax call request.term (which will take whatever you input in the autocomplete field where as my method was invoking the ajax call only after tab out.
 5. Map the data of response response($.map(data.data, function(item){
 6. Write a select callback function to make anything happen after i click on any entry in the typeahead
 7.data("ui-autocomplete")._renderItem = function (ul, item) { >To show the data in a formatted way after the ajax call.

初始化

 $.each($(".nameClass"), function(index, item) {
    $(item).autocomplete({
       source:function(request,response){
    $.ajax({
    url: "www.getmeSomeData.com/query/name:"+request.term,
    type:"GET".
    dataType:"json",


success:function(result){
    //set this result in autocomplete which I am not sure how to do
      response($.map(data.data, function(item){
                  return{
                  value:item.somethigncomingfromJson //will set into the field
                  data:item
                }}))}}
     });
    } ,minLength :2,
    select:function(event,ui){
   //do something on select of a row in the autocomplete dropdown
    }}).data("ui-autocomplete")._renderItem=function(ul,item){
   return $("format in which you want to see the data").appendTo(ul);
   });
  }

不需要其他活动。

Jquery 自动完成小部件实现

Jquery Autocomplete widget implementation

javascript

java

jquery

json

jquery-ui-autocomplete