jQuery用户界面自动完成与数据库 [英] jquery ui autocomplete with database

问题描述

我相当新的JQuery，也许试图达到的东西，可能是升技更难初学者。不过我想创建一个发送电流值PHP脚本自动完成，然后返回必要的值。

下面是我的javascript code

  $（＃LOGIN_NAME）。自动完成（{
    来源：函数（请求，响应）{
 $阿贾克斯（{
     网址：http://www.myhost.com/myscript.php
     数据类型：JSONP     成功：功能（数据）{
  警报（数据）;
  响应（$。图（数据，功能（项目）{
      返回{
   标签：item.user_login_name，
   值：item.user_id
      }
  }））
     }
 }）
    }，
    的minLength：2
}）;
 

和这里是myscript.php

的后半段

 而（$行= $数据库 - ＆GT;取（MYSQLI_ASSOC））
{
    的foreach（$行为$列=＆GT; $ VAL）
    {
        $结果[$ i] [$列] = $ VAL;
    }
    $ I ++;
}
打印json_en code（$结果）;
 

哪个产生以下输出

<$p$p><$c$c>[{\"user_id\":\"2\",\"user_login_name\":\"Name1\"},{\"user_id\":\"3\",\"user_login_name\":\"Name2\"},{\"user_id\":\"4\",\"user_login_name\":\"Name3\"},{\"user_id\":\"5\",\"user_login_name\":\"Name4\"},{\"user_id\":\"6\",\"user_login_name\":\"Name5\"},{\"user_id\":\"7\",\"user_login_name\":\"Name6\"}]

谁能告诉我在哪里，我错了吗？开始变得非常沮丧。输入框刚刚转白，没有选项中。如果我指定的值的数组的code确实工作。

更新
我已经改变了code到仍没有运气。

  $（＃LOGIN_NAME）。自动完成（{
    来源：/ajax/login_name.php
    数据类型：JSON
    的minLength：2，
    缓存：假的，
    选择：函数（事件，UI）{
        警报（UI）;
    }
}）;
 

使用Firefox的Web开发工具，我得到一个错误b为null。

解决方案

终于找到了适合我的需求的解决方案。

  $（＃LOGIN_NAME）。自动完成（{
  来源：函数（请求，响应）{
    $。员额（/ AJAX / login_name.php，{数据：request.term}，功能（数据）{
        响应（$。图（数据，功能（项目）{
        返回{
            标签：item.user_login_name，
            值：item.user_id
        }
        }））
    }JSON）;
  }，
  的minLength：2，
  数据类型：JSON
  缓存：假的，
  重点：函数（事件，UI）{
    返回false;
  }，
  选择：函数（事件，UI）{
    THIS.VALUE = ui.item.label;
    / *做一些与USER_ID * /
    返回false;
  }
}）;
 

I fairly new to JQuery and perhaps trying to achieve something that might be abit harder for a beginner. However I am trying to create an autocomplete that sends the current value to a PHP script and then returns the necessary values.

Here is my Javascript code

$("#login_name").autocomplete({
    source: function(request, response) {
 $.ajax({
     url: "http://www.myhost.com/myscript.php",
     dataType: "jsonp",

     success: function(data) {
  alert(data);
  response($.map(data, function(item) {
      return {
   label: item.user_login_name,
   value: item.user_id
      }
  }))
     }
 })
    },
    minLength: 2
});

And here is the the last half of "myscript.php"

while($row = $Database->fetch(MYSQLI_ASSOC))
{
    foreach($row as $column=>$val) 
    {
        $results[$i][$column] = $val;
    }
    $i++;
}
print json_encode($results);

Which produces the following output

[{"user_id":"2","user_login_name":"Name1"},{"user_id":"3","user_login_name":"Name2"},{"user_id":"4","user_login_name":"Name3"},{"user_id":"5","user_login_name":"Name4"},{"user_id":"6","user_login_name":"Name5"},{"user_id":"7","user_login_name":"Name6"}]

Can anyone tell me where I am going wrong please? Starting to get quite frustrated. The input box just turns "white" and no options are shown. The code does work if I specify an array of values.

UPDATE I have changed the code to and still having no luck.

$("#login_name").autocomplete({
    source: "/ajax/login_name.php",
    dataType: "json",
    minLength: 2,
    cache: false,
    select: function(event, ui) {
        alert(ui);
    }
});

Using FireFox's Web Developer tool, I am getting an error "b is null".

解决方案

Finally found the solution that fits my needs

$("#login_name").autocomplete({
  source: function(request, response){
    $.post("/ajax/login_name.php", {data:request.term}, function(data){     
        response($.map(data, function(item) {
        return {
            label: item.user_login_name,
            value: item.user_id
        }
        }))
    }, "json");
  },
  minLength: 2,
  dataType: "json",
  cache: false,
  focus: function(event, ui) {
    return false;
  },
  select: function(event, ui) {
    this.value = ui.item.label;
    /* Do something with user_id */
    return false;
  }
});

这篇关于jQuery用户界面自动完成与数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！